React 'use client' visually explained: What, Why, How

Bundling groups imported modules into code suited to where it will run, and can split code by route or environment. Servers can access databases and secrets, parse Markdown, and prerender pages; browsers can use DOM and browser APIs and respond immediately to user input.

In a server-first framework such as Next.js, route modules and their imports begin in the server environment. Adding “use client” at the top of a file marks an entry point into the client environment, and its imports become client modules too. Marking every imported file separately has no additional bundling effect.

When a server module imports from a client module, it receives a reference to the client export rather than the value itself; React renders the client component in the client environment. “Use server” marks functions that client code can call, with React handling the communication layer, and is not a way to mark server components.

A client module cannot import a server component, since that could require another server round trip after client rendering begins. Instead, a server component can be passed to a client component as a prop, so the server can render both in one pass. For example, a server-rendered data card can appear inside a client-side modal that toggles visibility.

Client components may also be prerendered on the server, letting users see and navigate the initial HTML while JavaScript loads and React hydrates it. Unchanging content can be prerendered at build time. De Oliveira says the model simplifies how developers compose UI across environments, while acknowledging rough edges and that it does not replace back-end tools for needs beyond serving UI.