Combining client and server components

1
During a request-response lifecycle, your code moves from the server to the client. If you need to access data or resources on the server while on the client, you'll be making a new request to the server - not switching back and forth.
2
When a new request is made to the server, all Server Components are rendered first, including those nested inside Client Components. The rendered result (RSC Payload) will contain references to the locations of Client Components. Then, on the client, React uses the RSC Payload to reconcile Server and Client Components into a single tree.
3
Since Client Components are rendered after Server Components, you cannot import a Server Component into a Client Component module (since it would require a new request back to the server). Instead, you can pass a Server Component as props to a Client Component. See the unsupported pattern and supported pattern sections below.
4
You cannot import a Server Component into a Client Component

Difficulty: 5/10

Topics: client components, server components, data fetching

0-2 years experience

1
You need to display a list of products fetched from an API, and each product has an 'Add to Cart' button that updates client state. How would you decide which parts of this page should be a server component and which should be a client component in Next.js?
2
If you accidentally import a client‑only hook like useState inside a server component, what error will you see at build time, and how do you fix it?
3
Describe the steps to convert an existing server component page into a hybrid page that includes a client component for interactive UI.

2-5 years experience

1
Your team added a client component inside a server component to handle a modal, but the page's initial load time increased dramatically. Walk me through how you would investigate and what trade‑offs you might consider.
2
During a code review you notice that a server component is importing a heavy third‑party UI library that only needs to run in the browser. How would you refactor it, and what impact does it have on bundle size and SSR?
3
Explain why a server component cannot directly use useEffect, and how you would restructure code that currently relies on it.

5-8 years experience

1
We need to build a dashboard that streams real‑time data via WebSockets while still leveraging server components for SEO‑critical sections. How would you architect the component hierarchy to balance streaming updates and server‑side rendering?
2
A legacy page mixes client and server logic, causing hydration mismatches in production. Describe a systematic approach to isolate client behavior, minimize hydration errors, and ensure performance at scale.
3
Consider a multi‑tenant SaaS app where each tenant can customize UI widgets. How would you design a component loading strategy that uses server components for static parts but dynamically loads client components per tenant without blowing up the bundle?

8+ years experience

1
Our organization is migrating a large monolithic Next.js app to use the new app directory with server and client components. What high‑level migration plan would you propose to minimize risk, handle cross‑team dependencies, and maintain backward compatibility?
2
Discuss the long‑term maintenance implications of over‑using client components in a codebase that aims for edge‑rendered server components. How would you set guidelines and tooling to enforce a healthy balance?
3
When evaluating whether to move a piece of business logic from a client component to a server component, what criteria (performance, security, data freshness) would you weigh, and how would you measure the impact after the change?

❓What metrics would you watch after making the split to ensure performance improved?
❓Can you think of any edge cases where moving code to a server component could break functionality?
❓How would you communicate these component boundaries to other engineers on the team?