Interleaving Server and Client Components

Interleaving Server and Client Components

To build performant Next.js applications, you must know how to compose Server Components and Client Components together without breaking the RSC boundary.

Rule #1: You CANNOT import a Server Component into a Client Component

If a file marked with 'use client' directly imports a Server Component file, that component will be forcibly converted into a Client Component!

// ❌ WRONG PATTERN
'use client';

// HeavyServerList will be bundled for the client!
import HeavyServerList from './HeavyServerList';

export default function ClientContainer() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && <HeavyServerList />}
    </div>
  );
}

Rule #2: Pass Server Components as children or Props

To render a Server Component inside a Client Component, pass the Server Component as a React node prop (such as children) from an overarching Server Component!

// ✅ CORRECT PATTERN - Client Component acts as a wrapper slot
// components/ClientModal.tsx
'use client';

import { useState } from 'react';

export default function ClientModal({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);

  return (
    <div className="relative">
      <button onClick={() => setOpen(!open)}>Toggle Modal</button>
      {open && <div className="p-4 border shadow-lg">{children}</div>}
    </div>
  );
}

// app/page.tsx - Server Component composition root
import ClientModal from '@/components/ClientModal';
import HeavyServerList from '@/components/HeavyServerList';

export default async function Page() {
  return (
    <main>
      <h1>Dashboard Page</h1>
      {/* HeavyServerList remains a pure Server Component! */}
      <ClientModal>
        <HeavyServerList />
      </ClientModal>
    </main>
  );
}

Serialization Boundary Rules

When passing props from a Server Component to a Client Component, the prop values must be serializable across the network boundary.

TL;DR

• Never import a Server Component directly inside a 'use client' module.
• Pass Server Components as children or JSX props to Client Components.
• Data passed as props across the Server-to-Client boundary must be serializable JSON-like data.
• Keep Client Components at the visual leaves of your component tree.