react-use-client-boundary

You need the 'use client' directive in a Next.js app when a component requires interactivity, state, or browser APIs. Place the client boundary at the component requiring these features, keeping child components pure to prevent accidental client leakage.

To structure a page with mixed server and client boundaries, place the 'use client' directive at the component requiring interactivity or state. This boundary isolates client logic while keeping parent and child components server-rendered and pure.

Adding 'use client' to a parent component affects its imports because when a client boundary is introduced, all imported child components become client components. This rule prevents confusing component hierarchies and accidental client leakage.

Avoid adding 'use client' to child components unnecessarily because once a client boundary is introduced, all imports become client components. Keep child components pure and only isolate the specific component requiring state or browser APIs.

The best way to isolate interactive widgets in React server components is to wrap only the interactive widget in a client boundary. Place the 'use client' directive on the widget component to separate it from server-rendered content.

Yes, you can mix server-rendered content with client-only logic by placing a client boundary at the component that requires state or browser APIs. This separates interactive widgets and forms from the server component hierarchy.