Streaming and partial rendering in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js streaming component render first?

Consider this Next.js server component using streaming:

export default async function Page() {
  const data = await fetch('https://api.example.com/data').then(res => res.json())
  return (
    <main>
      <h1>Welcome</h1>
      <section>{data.message}</section>
    </main>
  )
}

What part of the page will the browser display first during streaming?

NextJS

export default async function Page() {
  const data = await fetch('https://api.example.com/data').then(res => res.json())
  return (
    <main>
      <h1>Welcome</h1>
      <section>{data.message}</section>
    </main>
  )
}

A The <h1>Welcome</h1> renders immediately, then <section> with data appears after fetch.

B The entire page renders only after data is fully fetched.

C Only the <section> renders first, <h1> appears after data fetch.

D Nothing renders until the fetch completes.

💡 Hint

Without Suspense boundaries, top-level awaits in server components block rendering of the entire page.

Awaiting the fetch before returning JSX means the server waits for all data before rendering and streaming any HTML. No partial streaming occurs.

📝 Syntax

intermediate

Which Next.js code snippet correctly enables streaming with Suspense?

Choose the correct way to use React Suspense for streaming in a Next.js server component:

NextJS

import React, { Suspense } from 'react';

function Loading() {
  return <p>Loading...</p>;
}

async function DataComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <p>{data.message}</p>;
}

export default function Page() {
  return (
    <main>
      <h1>Title</h1>
      {/* Suspense usage here */}
    </main>
  );
}

A

<Suspense fallback={<Loading />}>
  {DataComponent()}
</Suspense>

B

<Suspense fallback={<Loading />}>
  {await <DataComponent />}
</Suspense>

C

<Suspense fallback={<Loading />}>
  <DataComponent />
</Suspense> // but DataComponent is async function

D

<Suspense fallback={<Loading />}>
  <DataComponent />
</Suspense>

💡 Hint

Remember Suspense expects components, not promises or awaited JSX.

Suspense wraps components that may suspend rendering. Async components must be used as JSX elements without awaiting inside Suspense.

🔧 Debug

advanced

Why does this Next.js streaming page block rendering until all data loads?

Given this Next.js server component using streaming, why does the browser wait for all data before showing anything?

export default async function Page() {
  const user = await fetch('/api/user').then(r => r.json())
  const posts = await fetch('/api/posts').then(r => r.json())
  return (
    <main>
      <h1>Hello {user.name}</h1>
      <ul>
        {posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </main>
  )
}

NextJS

export default async function Page() {
  const user = await fetch('/api/user').then(r => r.json())
  const posts = await fetch('/api/posts').then(r => r.json())
  return (
    <main>
      <h1>Hello {user.name}</h1>
      <ul>
        {posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </main>
  )
}

A Because both fetch calls are awaited sequentially before returning JSX, blocking streaming.

B Because Next.js disables streaming when multiple fetches are used.

C Because the component uses client-side rendering instead of server streaming.

D Because the JSX syntax is invalid and prevents streaming.

💡 Hint

Think about when the component returns JSX in relation to async calls.

Awaiting both fetches before returning JSX means the server waits for all data before sending any HTML, blocking streaming.

❓ state_output

advanced

What is the rendered output of this Next.js streaming component with nested Suspense?

Analyze this Next.js component using nested Suspense for streaming partials:

import React, { Suspense } from 'react';

function LoadingUser() { return <p>Loading user...</p> }
function LoadingPosts() { return <p>Loading posts...</p> }

async function User() {
  const user = await fetch('/api/user').then(r => r.json())
  return <h2>User: {user.name}</h2>
}

async function Posts() {
  const posts = await fetch('/api/posts').then(r => r.json())
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

export default function Page() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Suspense fallback=<LoadingUser />>
        <User />
      </Suspense>
      <Suspense fallback=<LoadingPosts />>
        <Posts />
      </Suspense>
    </main>
  )
}

What will the user see first in the browser?

NextJS

import React, { Suspense } from 'react';

function LoadingUser() { return <p>Loading user...</p> }
function LoadingPosts() { return <p>Loading posts...</p> }

async function User() {
  const user = await fetch('/api/user').then(r => r.json())
  return <h2>User: {user.name}</h2>
}

async function Posts() {
  const posts = await fetch('/api/posts').then(r => r.json())
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

export default function Page() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Suspense fallback={<LoadingUser />}>
        <User />
      </Suspense>
      <Suspense fallback={<LoadingPosts />}>
        <Posts />
      </Suspense>
    </main>
  )
}

A Dashboard heading, then Loading user..., then Loading posts..., then user and posts data appear.

B Dashboard heading, then user data, then posts data, no loading messages.

C Only Loading user... and Loading posts... appear, no Dashboard heading.

D Nothing appears until both user and posts data load.

💡 Hint

Suspense fallback shows while async components load.

The <h1>Dashboard</h1> renders immediately. Suspense shows fallback placeholders for User and Posts until their data loads, then replaces them with real content.

🧠 Conceptual

expert

Why is streaming with React Server Components beneficial for large Next.js apps?

Choose the best explanation for why streaming and partial rendering with React Server Components improves performance in large Next.js applications.

A It disables client-side JavaScript, making pages static and faster to load.

B It forces the entire page to load before rendering, ensuring consistent layout and avoiding flicker.

C It allows sending HTML chunks as soon as parts are ready, reducing time to first meaningful paint and improving user experience.

D It caches all data on the client to avoid any server requests after the first load.

💡 Hint

Think about how streaming affects perceived loading speed and interactivity.

Streaming sends HTML in parts as soon as they are ready, so users see content faster. This reduces waiting and improves perceived performance, especially for large apps.