Questions
6 of 33
Describe how server components are rendered.
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
- 1If you need to fetch data for a page that doesn't require any client-side interactivity, how would you use a server component in Next.js to render it, and what steps does Next.js take to render that component?
- 2What happens when you import a React component that is marked as a server component inside a client component? How does Next.js handle the rendering?
2-5 years experience
- 1We have a product detail page that mixes server‑only data fetching with a client‑side carousel. Walk me through how you would structure the components and what you’d expect Next.js to do during rendering.
- 2During a recent release, a server component started throwing a 'ReferenceError: window is not defined'. How would you debug this, and what does it tell you about the rendering lifecycle?
5-8 years experience
- 1Our team is considering moving a large portion of the UI to server components to improve TTFB, but we have concerns about streaming and caching. How would you evaluate the trade‑offs and design a rendering strategy?
- 2Explain how Next.js streams server component HTML to the client and how you would handle a scenario where a downstream API is slow, ensuring the page remains responsive.
8+ years experience
- 1We have a monorepo with multiple Next.js apps, some still using traditional pages and others using the new app directory with server components. How would you plan a migration strategy that minimizes disruption and aligns with long‑term maintainability?
- 2Discuss the architectural implications of using server components for shared UI libraries across teams, especially regarding versioning, bundle size, and deployment pipelines.
Follow-up Questions
- Can you elaborate on how streaming interacts with Suspense boundaries?
- What impact does this rendering model have on SEO and initial load performance?
- How would you handle errors that occur during server component rendering?