react-server-components

To reduce client bundle size in Next.js App Router, move data fetching and rendering for non-interactive UI to the server using React Server Components. This minimizes client-side JavaScript by keeping server-bound data on the server.

Yes, you can use interactive components with React Server Components by applying the 'use client' directive. This isolates interactivity to small Client Components while the main dashboard renders on the server.

Use the 'use client' directive for server rendering when a specific subcomponent requires client interactivity. This allows eligible components to render on the server while maintaining necessary client-side event handlers.

Yes, this server rendering approach supports data mutations through Server Functions. You can handle mutations directly on the server while keeping non-interactive UI rendering and data fetching server-bound to shrink client bundles.

The best way to build a dashboard with minimal client interactivity is using React Server Components to run most components on the server. This limits client-side JavaScript strictly to small interactive Client Components.

No, you do not need to move all components to the server to shrink client bundles. You can keep eligible non-interactive UI server-rendered while selectively applying the 'use client' directive only where interactivity is required.