LESSON 08 · 約30分

ServerとClientの境界を理解する

「どこで動くか」を整理すると、Next.jsのコードが読みやすくなります。

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

Server・Client Componentsの用途を判断できる
必要な場所にだけuse clientを置ける

ページとレイアウトは、まずServer Components

App Routerのpageやlayoutは標準ではServer Componentsです。サーバーやビルド時に処理し、データ取得や表示の組み立てを担当できます。部品の処理コードをそのままブラウザーへ送る必要がない点が特徴です。

操作が必要な小さな部分をClientにする

state、クリック、ブラウザーAPIが必要ならuse clientで境界を作ります。ディレクティブはファイルの先頭に置きます。そのファイルから読み込むモジュールもクライアント側の依存関係に入るので、大きな親を不用意にClient化しないことが重要です。

Clientは「サーバーでは何もしない」ではない

初回表示ではClient ComponentsもサーバーでHTMLの生成に関わり、ブラウザーでハイドレーションされます。windowを描画中に使ってよい、という意味ではありません。境界をまたいで渡すデータは、Reactが受け渡せる形に絞ります。

Serverから小さなClient部品を使う

app/page.jsx

import ReadButton from './ui/read-button'

export default function Page() {
  return (
    <main>
      <h1>ServerとClientを分けよう</h1>
      <p>この本文はServer Component側です。</p>
      <ReadButton />
    </main>
  )
}

read-button.jsxにはレッスン04のコードを使います。ページ全体にuse clientは不要です。

TRY IT YOURSELF

境界に色をつける

記事本文・読了ボタン・検索入力を紙に描く
操作が必要な部品に印をつける
ページをServerのままにして読了ボタンだけ配置する

できたらOK：use clientが必要な理由を部品ごとに説明できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。