react-server-components

Fetch data directly in React Server Components to execute database queries or API calls on the server, sending rendered HTML to the client and minimizing client JavaScript bundles. This approach keeps data fetching entirely server-side.

Implement streaming and progressive loading in the Next.js App Router by wrapping server components in Suspense boundaries. This streams HTML chunks to the browser immediately, progressively revealing UI as data resolves without blocking the entire page.

Apply the 'use client' directive only to components requiring client-side interactivity like event listeners or state. This enables selective hydration across server and client boundaries, keeping the majority of your React app server-rendered and interactive only where needed.

React Server Components work effectively for complex dashboards and content-heavy CMS-style sites by separating server and client concerns. This architecture enables progressive loading and minimal client JavaScript, satisfying high-performance requirements for data-heavy applications.

The best way to structure server and client composition in Next.js is designing a server component hierarchy first, then progressively adding client components where interactivity is needed. This cleanly separates server and client responsibilities while optimizing performance.