#Importing server components into client component

1 messages · Page 1 of 1 (latest)

viral geyser
#

Does importing a server component into a client component in Next.js fully bring it into the client as if you weren't even using Next.js?

export default function ServerMessage() {
  console.log("This runs on the server")
  return <div>Rendered on the server</div>
}

"use client"

import ServerMessage from "./ServerMessage"

export default function ClientWrapper() {
  return (
    <div>
      <h1>Client Component</h1>
      <ServerMessage />
    </div>
  )
}
calm plankBOT
#

Hi @viral geyser. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Importing a server component into a client component in Next.js does not work as you might expect. When you import a server component (like your ServerMessage) into a client component (like your ClientWrapper), the server component is treated as a client component. This means:

  • The code for ServerMessage will be bundled and executed on the client, not the server.
  • Any server-only logic (such as accessing environment variables or server-side APIs) will not work and may cause errors or unexpected behavior.
  • The console.log("This runs on the server") will actually run in the browser, not on the server.

This is due to the transitive nature of the "use client" directive: once a file is marked as a client component, all its imports and child components are considered part of the client bundle, regardless of their original intent or file location. The server component is not kept on the server; it is brought into the client bundle as if you were not using Next.js server components at all see official docs and discussion on transitivity.

If you want to combine server and client logic, the recommended pattern is to pass server components as props (such as children) to client components, rather than importing them directly. This allows the server component to be rendered on the server and its output passed to the client component see interleaving example.

#

Summary:
Yes, importing a server component into a client component in Next.js brings it fully into the client bundle, and it will not run on the server as a true server component anymore. This is a fundamental aspect of how Next.js handles the client/server boundary.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@viral geyser Kapa.ai is still learning and improving, please let me know how I did by reacting below.

viral geyser
#

@calm plank Do you have an example of this? "If you want to combine server and client logic, the recommended pattern is to pass server components as props (such as children) to client components"

calm plankBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Yes, here is an example from the official Next.js documentation that demonstrates how to combine server and client logic by passing a server component as a prop (specifically, as children) to a client component:

Client Component (Modal):

// app/ui/modal.tsx
'use client'

export default function Modal({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

Server Component (Page):

// app/page.tsx
import Modal from './ui/modal'
import Cart from './ui/cart' // Cart is a server component

export default function Page() {
  return (
    <Modal>
      <Cart />
    </Modal>
  )
}

In this pattern, the <Cart /> server component is rendered on the server and passed as a child to the <Modal /> client component. This allows you to interleave server-rendered UI within client components, maintaining the separation of concerns and optimizing rendering see official example.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: