The Quickest Way to Debug Server Component Boundaries

In Next.js, it's easy to accidentally make a huge chunk of your app a Client Component by placing a "use client" directive too high in the tree.

The Debugging Trick: Add console.log("Rendering Component X") in the body of your components.

• If it prints in your terminal, it rendered on the server.
• If it prints in your browser console, it hydrated on the client.
• If it prints in both, it's a Client Component that was SSR'd.

To ensure a component NEVER renders on the client, import the server-only package:

import 'server-only';

If any Client Component tries to import it, the build will hard fail.