React Server Components best practices

Use when working with React Server Components and the broader full-stack React architecture around server and client component boundaries.

Mental model

• Server Components render in a server environment before bundling and are not sent to the browser as executable component code.
• Client Components handle browser interactivity and must opt in with "use client".
• Server Components and SSR are related but not identical. Server Components decide where component code runs; SSR decides whether HTML is generated on the server for the initial response.

Boundaries

• Keep server and client responsibilities explicit. Put data access, filesystem access, and heavy server-only dependencies on the server side.
• Use Client Components only where browser APIs, local interaction, or client-only state are truly needed.
• Avoid promoting large subtrees to "use client" just to solve one local interaction need.

Data loading