Sign in
Skip to solution
mediumFrontend

What is loading.js in Next.js and how does Suspense streaming work?

237 views
01

Understand the problem

Instant loading UI via automatic Suspense boundaries.

nextjsloadingsuspensestreaming
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

Adding loading.js wraps the segment in a Suspense boundary, so Next.js streams an instant fallback while the server component fetches data, then streams in the real content. This improves perceived performance without manual Suspense wiring.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Instant loading UI
// app/dashboard/loading.tsx — streamed instantly
export default function Loading() {
  return <div className="skeleton">Loading dashboard…</div>;
}

// app/dashboard/page.tsx — slow data; user sees Loading first
export default async function Page() {
  const data = await getSlowReport();    // streams in when ready
  return <Report data={data} />;
}
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 62 of 95 decoded in the Next.js track. One more won't hurt.

Back to track