Sign in
Skip to solution
hardFrontend

What is streaming SSR with Suspense in Next.js?

283 views
01

Understand the problem

Sending HTML in chunks as data resolves.

nextjsstreamingsuspensessr
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Streaming SSR sends the shell immediately and streams in parts of the page as their data resolves, using Suspense boundaries (loading.js or ). The user sees content faster and slow data doesn't block the whole page.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Independent streaming with Suspense
import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />                                   {/* sent immediately */}
      <Suspense fallback={<Skeleton />}>
        <SlowFeed />                               {/* streams in when ready */}
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <SlowSidebar />                            {/* streams independently */}
      </Suspense>
    </>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 88 of 95 decoded in the Next.js track. One more won't hurt.

Back to track