nextjs-client-boundary

You need to use client boundaries in Next.js when a component requires interactivity, state, or browser APIs. Apply the "use client" directive only to those specific leaf components, keeping the rest of your app server-rendered by default.

To place the "use client" directive in Next.js, push interactive parts to the leaves of your component tree. Keep layouts and pages as server components, and insert the directive only at the lowest-level interactive widgets to minimize client footprint.

Server components render on the server for optimized performance, while client components render on the browser to handle interactivity. The "use client" directive establishes the boundary, trading server-side benefits for client-side state and event handling.

Yes, you can use client components within a server-first architecture. Default to server components for pages and layouts, then selectively import client components for interactive widgets, ensuring the boundary is placed at the lowest necessary level.

Marking an entire Next.js page as a client component increases the client JavaScript bundle and reduces server-rendering benefits. To avoid this limitation, keep the boundary at the leaf level and isolate interactive widgets from server-rendered layouts.

The best way to minimize client bundle size with React server components is to push the "use client" boundary to the deepest leaf components. Isolate interactive widgets so that pages and layouts remain server-rendered and only necessary code ships to the browser.