NextJs 13 – using Server Components in Client Components

DanielNovember 17, 2022November 18, 2022

We cannot directly import a server component into a client component in NextJs 13.

// ⛔️ this will not work !!!

'use client';

import ReadFromDataBaseComponent from './ReadFromDataBaseComponent';

export default function ClientComponent() {
  // do something with ReadFromDataBaseComponent
}

The reason why we cannot import directly a server component into a client component is that the server component can have code for things like reading/writing files or databases that are only accessible on the server side.

To be able to use a server component in a client one we first need to render the server component and include just the resulting HTML in the client component. For this we need to wrap the Server component as a child (or property) for the Client component:

// 👍 this works

export default function ClientComponent({ children }) {
  // do ClientComponent logic stuff here

  return (<>
    // ...
    {children}
  </>)
}

And now we can write in a NextJs 13 page:

import ClientComponent from "./ClientComponent";
import ReadFromDataBaseComponent from "./ReadFromDataBaseComponent";
```jsx
export default function Page() {
  return (
    <ClientComponent>
        // we will not have any server-side code here
        <ReadFromDataBaseComponent />
    </ClientComponent>
  );
}

The official documentation link on this subject.