Next.js: サーバーコンポーネントのメンタルモデル

// app/dashboard/page.tsx — サーバーコンポーネント (ゼロクライアント JS)
import { getSalesData } from '@/lib/db'
import { formatDistanceToNow } from 'date-fns'

export default async function DashboardPage() {
  const sales = await getSalesData()  // データベースに直接アクセス
  return (
    <div>
      <h1>Dashboard — {sales.length} records</h1>
      <SalesTable data={sales} />
    </div>
  )
}

async function SalesTable({ data }: { data: Sale[] }) {
  return (
    <table>
      {data.map(row => (
        <tr key={row.id}>
          <td>{formatDistanceToNow(row.createdAt)}</td>
          <td>{row.amount}</td>
        </tr>
      ))}
    </table>
  )
}

Diagram: RSC Components; Database/File System/API; Serialize to RSC Payload React Flight Agreement; RSC Payload; Client Component Preserve the interaction logic; Pure HTML Rendering Zero JS Overhead.

// app/bundle-demo/page.tsx — サーバーコンポーネント (純粋にサーバーサイド)
import { format, addDays } from 'date-fns'

export default function BundleDemoPage() {
  const today = new Date()
  const dates = Array.from({ length: 7 }, (_, i) => {
    const d = addDays(today, i)
    return { label: format(d, 'EEEE'), date: format(d, 'yyyy-MM-dd') }
  })

  return (
    <div>
      <h1>This Week</h1>
      <ul>{dates.map(d => <li key={d.date}>{d.label}: {d.date}</li>)}</ul>
    </div>
  )
}

ビルド後チェック .next/static/chunks — date-fns のコードが除外されている

ビルド後、.next/static/chunks ディレクトリには date-fns のコードが含まれていません — クライアントサイドの JS オーバーヘッドがゼロであることが確認されました。ページは "This Week" 見出し + 7つのリスト項目 (例: "Monday: 2026-07-06", "Tuesday: 2026-07-07", ...) をレンダリングします。

// ✅ 正しい: サーバーコンポーネントがクライアントコンポーネントをインポート
// app/page.tsx (Server)
import ClientCounter from './ClientCounter'
export default function Page() {
  return <ClientCounter />
}

// app/ClientCounter.tsx (Client)
'use client'
import { useState } from 'react'
export default function ClientCounter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

// ❌ エラー: クライアントコンポーネントはサーバーコンポーネントを直接インポートできない
// app/ClientList.tsx
'use client'
import ServerItem from './ServerItem'  // ❌ コンパイルエラー: サーバーコンポーネントはクライアントサイドでインポートできない

export default function ClientList() {
  return <ServerItem />  // この行はエラーを引き起こす
}

// app/layout.tsx (Server)
import ClientShell from './ClientShell'
import ServerSidebar from './ServerSidebar'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ClientShell sidebar={<ServerSidebar />}>
      {children}
    </ClientShell>
  )
}

Includes a sidebar.
Visible text: }>
      {children}

// app/interleaving/ClientWrapper.tsx
'use client'
import { useState } from 'react'

export default function ClientWrapper({ sidebar, children }: {
  sidebar: React.ReactNode
  children: React.ReactNode
}) {
  const [isOpen, setIsOpen] = useState(true)
  return (
    <div style={{ display: 'flex' }}>
      {isOpen && <aside>{sidebar}</aside>}
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      <main>{children}</main>
    </div>
  )
}

An interactive component with state management.
Visible text: }

// app/interleaving/page.tsx (Server)
import ClientWrapper from './ClientWrapper'
import { getSidebarData } from '@/lib/db'

export default function InterleavingPage() {
  const items = getSidebarData() // サーバーサイドでデータを取得
  return (
    <ClientWrapper sidebar={<ServerItemList items={items} />}>
      <h1>Main Content</h1>
    </ClientWrapper>
  )
}

async function ServerItemList({ items }: { items: string[] }) {
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>
}

Renders a list of items using .map().
Visible text: }> | Main Content

// app/serializable/page.tsx (Server)
function greet() { return 'hello' }  // ❌ 関数はシリアライズ不可
const date = new Date()              // ⚠️ Date は RSC Props として許可されない

// app/serializable/ClientComponent.tsx
'use client'
export default function ClientComponent(props: {
  fn: () => string       // ❌ 関数を props に → 実行時エラー
  date: Date             // ⚠️ Date → 文字列に変換され、タイムゾーンが欠落する可能性
  data: { name: string } // ✅ 通常のオブジェクトは可
}) {
  return <div>{props.data.name}</div>
}

Renders the ClientComponent component UI.

# Network パネルを開き、ページをリフレッシュし、Fetch/XHR をフィルタリング
# 現在のページのリクエストを見つけ、Response を表示
# Content-Type: text/x-component が RSC ペイロード

# RSC ペイロード抜粋 (簡略化):
M1:{"id":"./app/page.tsx","chunks":["app/page-abc123.js"]}
J0:["$","div",null,{"children":["$","h1",null,{"children":"Dashboard"}]}]
S1:"react.suspense"

// app/flight-demo/ServerData.tsx — 純粋なサーバーサイドデータコンポーネント
export default async function ServerData() {
  const data = await fetch('https://api.example.com/data').then(r => r.json())
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

// app/flight-demo/ClientShell.tsx
'use client'
export default function ClientShell({ dataSlot }: { dataSlot: React.ReactNode }) {
  return (
    <div className="card">
      <h2>Client Shell</h2>
      <div className="server-data">{dataSlot}</div>
    </div>
  )
}

Renders: Client Shell
Visible text: Client Shell

// app/flight-demo/page.tsx
import ClientShell from './ClientShell'
import ServerData from './ServerData'

export default function FlightDemoPage() {
  return (
    <ClientShell dataSlot={<ServerData />}>
  )
}

// app/rsc-architecture/layout.tsx — RSC レイアウト
import ClientShell from './ClientShell'
import { getUser } from '@/lib/auth'

export default async function RscLayout({ children }: { children: React.ReactNode }) {
  const user = await getUser()                    // ✅ 直接データベースクエリ
  return (
    <ClientShell username={user?.name ?? 'Guest'}>
      <nav>
        <a href="/">Home</a>
        <a href="/dashboard">Dashboard</a>
        <a href="/settings">Settings</a>
      </nav>
      {children}
    </ClientShell>
  )
}

// app/rsc-architecture/ClientShell.tsx
'use client'
import { useState } from 'react'
import type { ReactNode } from 'react'

export default function ClientShell({ username, children }: {
  username: string
  children: ReactNode
}) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  return (
    <div data-theme={theme}>
      <header>
        <span>Welcome, {username}</span>
        <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
          Toggle {theme}
        </button>
      </header>
      {children}
    </div>
  )
}

// app/rsc-architecture/page.tsx
import { getProjects } from '@/lib/db'

export default async function RscArchitecturePage() {
  const projects = await getProjects()
  return (
    <div>
      <h1>Projects ({projects.length})</h1>
      <table>
        <thead><tr><th>Name</th><th>Status</th></tr></thead>
        <tbody>
          {projects.map(p => (
            <tr key={p.id}>
              <td>{p.name}</td>
              <td><StatusBadge status={p.status} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function StatusBadge({ status }: { status: string }) {
  const colors: Record<string, string> = {
    active: '#4caf50', archived: '#9e9e9e', draft: '#ff9800'
  }
  return <span style={{ background: colors[status] ?? '#ccc', padding: '2px 8px', borderRadius: 4 }}>{status}</span>
}