2

Next.js official documentation says

If you want to import and use a server component from a client component, you must pass it as props or children because an error will occur if you just import and use the component.

However, as a result of actually writing the code, I just imported and used the server component in the client component, but no error occurred.

The code I used is below.

// /app/test/page.tsx
'use client';

import Server from './Server';

const Page = () => {
  return (
    <div>
      <h1>Client Component</h1>
      <Server />
    </div>
  );
};
export default Page;

// /app/test/Server.tsx
const Server = () => {
  return <div>I am Server</div>;
};
export default Server;

Is there something I've misunderstood or missed?

Due to "use client" directive, it seems that the component called from the Page also became a client component.

At this time, is there a way to keep the loaded component (Server) as a server component?

JsPark
  • 73
  • 6
  • I guess it is not throwing any error because your server component doesn't actually have any **server only** code. Here, `Server.tsx` doesn't have any code that is `server-specific`, so importing it inside the `Page` Component, which is a client component, is taking it automatically as a client component. You may try adding some api call or database operation inside your server component and check the result. – PK_ May 06 '23 at 07:54
  • try server-only to keep as server component – Madan Bhandari May 06 '23 at 08:05
  • I've found that fetching data from the database or using server-only locks it into the server component. Thanks to those who responded to the questions in the comments! – JsPark May 06 '23 at 08:27

0 Answers0