Discuss 'use client' and 'use server' directives?
- 1
'use client' lets you mark what code runs on the client.
- 2
'use client' must be at the very beginning of a file, above any imports or other code to mark the module and its transitive dependencies as client code.
- 3
'use client' introduces a server-client boundary in the module dependency tree, effectively creating a subtree of Client modules.
- 1
'use server' marks server-side functions that can be called from client-side code.
- 2
Add 'use server' at the top of an async function body to mark the function as callable by the client. We call these functions Server Functions.
- 3
Instead of individually marking functions with 'use server', you can add the directive to the top of a file to mark all exports within that file as Server Functions that can be used anywhere, including imported in client code.
- 4
'use server' can only be used in server-side files. The resulting Server Functions can be passed to Client Components through props.
- 5
When calling a Server Function on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the Server Function returns a value, that value will be serialized and returned to the client.
Scenario Questions
- 1
If you need to fetch data on the server but also add an interactive button in the same file, how would you use the 'use client' directive?
- 2
What happens if you forget to add 'use client' at the top of a component that uses useState?
- 3
Show me how you'd convert a simple server component to a client component using the directive.
- 1
We have a page that renders a list of products server‑side, but each item has an 'Add to Cart' button that updates UI locally. The component currently has 'use client' at the top, but the list rendering is slow. How would you restructure the directives to improve performance?
- 2
During a code review you notice a server component importing a client‑only library (e.g., a date picker). The build fails with a directive error. Walk me through how you'd debug and fix it.
- 3
Why might adding 'use server' to a utility function cause a runtime error when called from a client component?
- 1
Our monorepo contains shared UI components used across both server and client contexts. How would you design a strategy for placing 'use client'/'use server' directives to maximize reuse while avoiding bundle bloat?
- 2
When scaling to thousands of concurrent users, what are the trade‑offs of moving a heavy data‑fetching component from client to server using the directives? Discuss caching, latency, and SEO implications.
- 3
Explain how you would handle a situation where a third‑party analytics library must run only on the client, but the surrounding component is a server component.
- 1
We are planning a migration from a legacy Next.js 12 codebase to the new app directory with server components. What architectural guidelines would you set for teams to decide when to mark a file 'use client' vs 'use server' to keep the codebase maintainable?
- 2
Across multiple product teams, some want to expose internal APIs via server components while others need client‑side interactivity. How would you establish a cross‑team convention and tooling to enforce correct directive usage and prevent accidental client‑only code in server bundles?
- 3
Consider a long‑term strategy for incremental adoption of server components in a large SaaS platform. How would you measure success and mitigate risks related to bundle size, developer experience, and runtime errors?
Follow-up Questions
- ❓What impact does the directive have on the component's bundle size?
- ❓How does Next.js enforce the separation at build time?
- ❓Can you give an example where forgetting a directive caused a runtime error?