react-server-components

Data fetching in React Server Components involves executing database queries directly within the server component. The Next.js App Router supports parallel and sequential fetching strategies with built-in caching and revalidation to minimize client-side JavaScript.

Server Components handle data fetching and rendering on the server to reduce client bundle size, while Client Components manage interactive state and UI updates. The Next.js App Router composition pattern determines where code executes for optimal web application performance.

Suspense streaming in the Next.js App Router wraps asynchronous server components to progressively load page sections. This mechanism sends HTML chunks to the browser as data becomes available, displaying loading skeletons to enhance perceived user experience.

Server Actions handle data mutations by securely executing server-side functions directly from client components. This Next.js App Router feature enables optimistic UI updates, providing immediate interface feedback while the mutation processes in the background.

Optimistic updates with React Server Components and Server Actions provide immediate UI feedback before the server mutation completes. This pattern improves perceived performance by updating the interface instantly while the data changes process securely in the background.

You should avoid using React Server Components when a web application requires heavy client-side interactivity, complex event listeners, or browser-only APIs. Components relying on state and lifecycle methods belong in the client boundary to prevent server execution limitations.