Why is importing a Server Component into a Client Component still working?

[developer-choi]

According to the Next.js documentation:

You cannot import a Server Component into a Client Component:

However, when I tested this in my project, the import still works, and no errors occur.

My github link > https://github.com/developer-choi/reproduce-2025-02-18

Below is my reasoning process for why this might be happening.

Rule 1: Components imported into a "use client" component are considered Client Components.

https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs

"use client" is used to declare a boundary between a Server and Client Component modules. This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle.

Based on this, it seems that the ServerComponent imported into my ClientComponent was considered a Client Component.

Rule 2: In the App Router, components are Server Components by default.

https://nextjs.org/docs/app/building-your-application/rendering/server-components#using-server-components-in-nextjs

By default, Next.js uses Server Components. This allows you to automatically implement server rendering with no additional configuration

Conclusion:

It looks like I misunderstood the interaction between these two rules.

That said, I still need an example that clearly demonstrates the statement:

You cannot import a Server Component into a Client Component:

Could someone guide me on how to modify my codes to properly illustrate this restriction?

[icyJoseph]

The component you have called Server Component, can still be opted in to a client module, because it doesn't do anything, that would prevent that.

You could for example:

• Make it async, and then add some state in your client component, try changing that state, and you'll most likely see an error (you have a counter)
• Access fs, or some other Node.js API.
• import server-only import 'server-only', note that you'd need to install this package

[developer-choi]

Thank you so much for your response.
I can finally prove the framework's explanation with code.