react-server-components

To reduce client-side JavaScript in Next.js, use React Server Components to render non-interactive UI and fetch data on the server. Isolate interactive widgets into 'use client' components to keep the browser bundle small and improve load characteristics.

You need the 'use client' directive when adding interactivity to a specific widget, such as state, effects, or event handlers. Keep the rest of the page as default Server Components to maintain server-side data access and zero-bundle rendering benefits.

Yes, React Server Components allow you to fetch server data and render UI on the server without shipping that component's code to the browser. This is ideal for documentation pages where markdown rendering and data lookups happen securely server-side.

You should use React Server Components for non-interactive UI to move data fetching and rendering work to the server. This prevents shipping unnecessary JavaScript for static elements like markdown content or warranty details, optimizing page load performance.

For mutations in Next.js Server Components, use server functions or server actions when supported by your framework. This allows you to perform data modifications server-side while keeping the interactive trigger isolated as a Client Component.