server-components

React Server Components fetch data directly inside the component using async/await on the server. This eliminates useEffect dependencies, reduces client bundle sizes, and simplifies data fetching by executing entirely server-side before rendering.

Client boundaries are set using the 'use client' directive at the top of interactive component files. This explicitly marks the transition from server to client rendering, keeping hydration requirements isolated to only the interactive parts of your UI.

Partial Prerendering (PPR) enables efficient mixed static and dynamic rendering by wrapping dynamic content in Suspense boundaries. This allows Next.js to stream prerendered static shells immediately while fetching dynamic data asynchronously.

Server Actions handle mutations directly on the server without creating API endpoints. They integrate with Suspense for progressive rendering, enabling seamless data mutations and streaming UI updates within modern Next.js applications.

Async server components support streaming out of the box when paired with Suspense boundaries. This allows the server to progressively render and stream UI chunks to the client as data resolves, improving perceived load performance.

Avoid React Server Components for logic requiring browser APIs, heavy client-side interactivity, or event listeners like onClick. Components needing state management or lifecycle hooks must remain client components marked with 'use client'.