Server Inside Client

Part of the Next.js Essentials section of Coddy's React journey — lesson 21 of 47.

Here's the rule almost everyone gets wrong, and it's the one that decides how far you can push the server.

A client component cannot import a server component: importing it drags it across the boundary and it becomes client code too. So people conclude that anything inside an interactive wrapper must be client code. That conclusion is wrong.

A client component can render server content passed to it as children.

The difference is who does the rendering. When a server page writes this:

<Panel>
    <Details />
</Panel>

…the server renders <Details /> and hands the finished result to Panel as a prop. Panel never imports it, never runs it: it just decides where to put it. As far as the client component is concerned, children is an already-finished piece of UI.

This is what lets a small interactive shell (a tab strip, a modal, a collapsible panel) wrap large amounts of server-only content without dragging any of it into the browser. The interactive part stays tiny; the content stays on the server.

The shape to remember: client wrappers, server fillings.

Challenge

Medium

components/Panel.jsx is a client component (locked, read it): it renders a toggle button and shows its children only when open.

Right now the page renders the details next to the panel instead of inside it, so the toggle controls nothing.

In app/page.jsx, move the <p id="details"> so it sits between the <Panel> tags as its children.
Keep the text exactly as it is, and leave app/page.jsx a server component: no directive.

The paragraph is still rendered on the server. The client panel only decides whether to show it.

Try it yourself

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}