Describe how server components are rendered.

Q: Describe how server components are rendered.

by individual route segments and Suspense Boundaries. React renders Server Components into a special data format called the React Server Component Payload (RSC Payload). Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML on the server. The HTML is used to show a fast non-interactive preview of the route immediately - this is for the initial page load only. The React Server Components Payload reconciles the Client and Server Component trees and updates the DOM. The JavaScript instructions hydrate Client Components and make the application interactive.

Difficulty: 5/10

rendering pipeline, streaming, client vs server components

On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks:

1
by individual route segments
2
and Suspense Boundaries.

Each chunk is rendered in two steps:

1
React renders Server Components into a special data format called the React Server Component Payload (RSC Payload).
2
Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML on the server.

Then, on the client:

1
The HTML is used to show a fast non-interactive preview of the route immediately - this is for the initial page load only.
2
The React Server Components Payload reconciles the Client and Server Component trees and updates the DOM.
3
The JavaScript instructions hydrate Client Components and make the application interactive.

Scenario Questions

0-2 years experience

2-5 years experience

Follow-up Questions