A Practical Guide to React Server Components

Server vs client components

Server Components render on the server and ship zero client JavaScript by default. Use them for data fetching, large dependencies, and static structure. Mark interactive islands with "use client".

Data fetching patterns

Colocate fetches with the component that needs them. Avoid waterfall requests by parallelizing with Promise.all at layout or page boundaries where possible.

Streaming and suspense

Wrap slow regions in <Suspense> boundaries so shells and navigation appear immediately while charts or feeds stream in.

Bundle size wins

Move date formatters, markdown parsers, and heavy icons to the server. Keep client components focused on state, effects, and browser APIs.

Common pitfalls

Do not pass non-serializable props from server to client children. Treat Server Actions as mutations with validation, not as a replacement for all APIs.