How is Suspense related to rendering?

Next.jsMiddle~1 min read

Suspense is a mechanism for controlling the moment of render that lets you show the UI gradually instead of waiting for everything to load. In Next.js it is directly tied to streaming rendering and asynchronous server rendering.

What `Suspense` is

In Next.js, Suspense:

defines a waiting boundary
tells React:

"if this piece isn't ready yet - show the fallback"
allows streaming HTML
works both on the server and on the client

How Suspense affects rendering

Without `Suspense`

Header ──┐
Content ├─ wait for everything
Sidebar ┘

→ the user sees the page only when everything is ready

With `Suspense`

Header ──────────────▶ right away
Sidebar ─────────────▶ right away
Content ── fallback ─▶ later

→ the UI appears in parts

A basic example

tsx

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />

      <Suspense fallback={<Skeleton />}>
        <HeavyBlock />
      </Suspense>
    </>
  );
}

tsx

async function HeavyBlock() {
  const data = await fetchSlowData();
  return <Content data={data} />;
}

Header renders right away
Skeleton - temporarily
Content - once the data is ready

Relation to rendering types

Rendering	Role of Suspense
SSR	streams HTML
ISR	speeds up the first screen
SSG	useful with dynamic blocks
CSR	shows a fallback until the client fetch

Suspense is not a type of rendering, but a tool for controlling it.

`Suspense` and `loading.tsx`

loading.tsx is:

an automatic Suspense for a segment

txt

app/tasks/[id]/
 ├─ loading.tsx   ← fallback
 └─ page.tsx

Equivalent to:

tsx

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

Important nuances

Works better with Server Components

data is loaded on the server
HTML is streamed
less JS

Client Components

Suspense waits for JS + fetch
the fallback matters for UX

Does not catch errors

For errors you need:

error.tsx
ErrorBoundary

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.