Streaming with Suspense in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this streaming Suspense component?

Consider this Next.js component using Suspense and streaming. What will the user see first when this component renders?

NextJS

import React, { Suspense } from 'react';

function SlowComponent() {
  const data = new Promise(resolve => setTimeout(() => resolve('Loaded Data'), 3000));
  const text = React.use(data);
  return <div>{text}</div>;
}

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SlowComponent />
    </Suspense>
  );
}

A The user sees 'Loading...' immediately, then after 3 seconds sees 'Loaded Data'.

B The user sees 'Loaded Data' immediately without delay.

C The user sees a blank page for 3 seconds, then 'Loaded Data' appears.

D The user sees an error because Suspense cannot be used with promises.

💡 Hint

Think about what Suspense does when waiting for data.

The Suspense component shows the fallback content ('Loading...') immediately while waiting for the promise to resolve. After 3 seconds, the resolved data replaces the fallback.

❓ state_output

intermediate

What is the final rendered output after streaming completes?

Given this Next.js streaming Suspense example, what is the final rendered HTML content?

NextJS

import React, { Suspense } from 'react';

function Data() {
  const promise = new Promise(resolve => setTimeout(() => resolve('Hello from server'), 2000));
  const message = React.use(promise);
  return <p>{message}</p>;
}

export default function Page() {
  return (
    <Suspense fallback={<p>Loading message...</p>}>
      <Data />
    </Suspense>
  );
}

A <p>Hello from server</p> immediately

B <p>Loading message...</p> followed by <p>Hello from server</p>

C <p>Loading message...</p> only, never replaced

D An error is thrown because React.use cannot be used with promises

💡 Hint

Remember how Suspense fallback works with async data.

The fallback

Loading message...

shows first. After 2 seconds, the promise resolves and the

Hello from server

replaces the fallback.

🔧 Debug

advanced

Why does this streaming Suspense component cause a runtime error?

Examine this Next.js component using Suspense and streaming. Why does it cause a runtime error?

NextJS

import React, { Suspense } from 'react';

function BrokenComponent() {
  const data = fetch('/api/data').then(res => res.json());
  const result = React.use(data);
  return <div>{result.value}</div>;
}

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <BrokenComponent />
    </Suspense>
  );
}

A React.use cannot be used with promises returned by fetch directly.

B The Suspense fallback is missing, causing the error.

C The fetch call is not awaited, so result is undefined.

D The component is missing a key prop inside Suspense.

💡 Hint

Consider how React.use works with promises and what it expects.

React.use expects a special kind of promise (a React Suspense resource). A raw fetch promise does not work directly and causes a runtime error.

🧠 Conceptual

advanced

Which statement about streaming with Suspense in Next.js is true?

Choose the correct statement about how streaming with Suspense works in Next.js.

A Streaming with Suspense only works on client-side rendering, not server-side.

B Streaming with Suspense disables fallback UI rendering.

C Streaming with Suspense requires disabling React Server Components.

D Streaming with Suspense allows parts of the UI to render immediately while waiting for async data in other parts.

💡 Hint

Think about how Suspense helps with loading states and partial rendering.

Streaming with Suspense lets Next.js send HTML chunks to the browser as soon as they are ready, showing fallback UI for parts still loading.

📝 Syntax

expert

Which option correctly implements streaming Suspense with async server component in Next.js?

Identify the correct code snippet that uses streaming Suspense with an async server component in Next.js 14+.

A

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

B

import { Suspense } from 'react';

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

export default function Page() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Data />
    </Suspense>
  );
}

C

import { Suspense } from 'react';

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

export default function Page() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Data />
    </Suspense>
  );
}

D

import { Suspense } from 'react';

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

export default function Page() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Data />
    </Suspense>
  );
}

💡 Hint

Remember async components must be awaited and Suspense fallback is required for streaming.

Option C correctly defines an async component that awaits data, wrapped in Suspense with a fallback. Option C lacks Suspense, C misuses React.use with raw promise, B does not await data.