In RSC, files that start with "use client" are bundled for the browser, and any React components they import must also be client‑safe; importing a Server Component here triggers a compile‑time error. When "use client" appears, a "network boundary" is created in the component tree.
server
node.js

This is a server component.

Async Data
server
node.js
Mr. Travis Gleason's avatar

Mr. Travis Gleason

Product Interactions Specialist

Stuart Kemmer's avatar

Stuart Kemmer

Legacy Factors Manager

shared
node.js

As a shared component, my imports inherit my boundary.

shared
node.js

This is a shared component.

client
node.js
"use client"; // is at the top of my file

This is a client component, doing client things 0.

All my imports must become client components, even if they don't have the "use client" directive.

shared
node.js

As a shared component, my imports inherit my boundary.

shared
node.js

This is a shared component.

As above, I can import shared components, but I can't import server components.

BoundaryServer
import Client from "./boundaryClient";
import ServerAsync from "./serverAsync";
import SharedChild from "./sharedChild";

export default function BoundaryServer() {
  return (
    <div>
      {/* Server Component */}
      <ServerAsync />
      {/* Becomes a Server Component */}
      <SharedChild />
      {/* Introduces a Network Boundary */}
      <BoundaryClient />
    </div>
  );
}
BoundaryClient
"use client"; // the magic directive

import Counter from "./counter";
import SharedChild from "./sharedChild";

export default function BoundaryClient() {
  return (
    <div>
      {/* Client Component */}
      <Counter />
      {/* Becomes a Client Component */}
      <SharedChild />
      {/* Cannot import Server Components */}
      {/* <ServerAsync /> */}
    </div>
  );
}
Next, let's see how we can construct component trees that contain React Server Components.
EnvironmentsInterweaving