react-server-components

Use React Server Components to server-render UI and reduce the client-side JavaScript footprint. Default to server components for data fetching and non-interactive UI to improve initial render performance in Next.js.

Use the 'use client' directive only on components that require interactivity, such as those managing state or handling events. Annotate interactive parts with 'use client' to opt-in to client-side behavior while keeping the rest server-rendered.

The best way to handle data fetching is defaulting to server components. Server-render components directly fetch server-side data for data-heavy UI, minimizing client JS and improving initial load performance without sending large bundles to the browser.

Yes, you can seamlessly integrate Server Functions or Server Actions for mutations when supported by your framework. This allows server-rendered components to handle data mutations directly on the server side.

React Server Components are applicable in Next.js App Router and other React Server Components-enabled frameworks. Any framework supporting RSC can leverage server rendering to minimize client-side JavaScript and improve initial load performance.

Server-rendering UI improves initial load performance by reducing the client JavaScript bundle. By rendering components on the server, the browser receives lighter HTML directly, avoiding the overhead of downloading and executing large client-side JavaScript.