Suggest an editImprove this articleRefine the answer for “How is Suspense related to rendering?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)`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**. **Key point:** `Suspense` **is not a type of rendering**, but a **tool for controlling it**.Shown above the full answer for quick recall.Answer (EN)Image`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`For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.