React Academy · レッスン

Next.jsのServer ComponentsとClient Components

'use client'を追加するタイミングと、server treeとclient treeを組み合わせる方法を判断します。

「Next.jsのServer ComponentsとClient Components」はCoddyKit上の無料React Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

デフォルト設定：Server Components

App Routerでは、すべてのコンポーネントがデフォルトでServer Componentsです。サーバー上でレンダリングされ、クライアント側のJavaScriptを一切必要とせず、データベース、環境変数、ファイルシステムに直接アクセスできます。

Client Componentsを選択する

ファイルの先頭に'use client'を追加すると、そのファイルがClient Componentになります。そこからインポートするすべてのモジュールもクライアント側になるため、クライアント境界が作成されます。

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Server Componentsでできること

Server Componentsでは、インラインでawaitを使ってデータを取得したり、環境変数を読み取ったり、ファイルシステムにアクセスしたりできます。また、クライアントバンドルを増やすことなく、大きなサーバー専用パッケージをインポートできます。

// app/products/page.tsx — Server Component
export default async function ProductsPage() {
  const products = await db.query('SELECT * FROM products');
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Server Componentsでできないこと

Server Componentsでは、フック（useState、useEffect）、ブラウザAPI、イベントハンドラーを使用できません。これらには'use client'が必要です。

ServerとClientの組み合わせ

Server Componentの出力を、propsやchildrenとしてClient Componentに渡します。基本パターンは、データ取得をServer Componentsに、インタラクティブな処理をClient Componentsに分けることです。

// Server Component (no 'use client')
async function ProductPage({ id }) {
  const product = await getProduct(id); // direct DB call
  return <AddToCartButton product={product} />; // client component
}

// Client Component
'use client';
function AddToCartButton({ product }) {
  const [added, setAdded] = useState(false);
  return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}

ServerからClientへのchildrenの受け渡し

Server ComponentはJSXをchildrenとしてClient Componentに渡せます。childrenはサーバーでレンダリングされたまま維持され、クライアント側のラッパーがインタラクティブ性を追加します。

// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && <dialog>{children}</dialog>}
    </>
  );
}

// Server Component — passes server-fetched content into client modal
async function Page() {
  const content = await fetchContent();
  return <Modal><ServerRenderedContent data={content} /></Modal>;
}

クライアント境界

'use client'を追加すると、そのファイルと、そこからインポートされるすべての子モジュールがクライアント側になります。子をServer Componentのまま維持するには、直接インポートする代わりにpropsまたはスロットとして渡します。

データ取得のパターン

Server Componentsでデータを取得し、下位のコンポーネントに渡します。可能な場合はClient Componentsでのデータ取得を避けてください。クライアントバンドルが重くなり、サーバー側のロジックが重複するためです。

// Good: fetch in server, pass to client
async function Page() {
  const user = await getUser();
  return <UserProfile user={user} />; // client component
}

// Avoid: fetch in client
'use client';
function UserProfile() {
  const { data } = useSWR('/api/user', fetcher); // network request from browser
}

サーバー専用ユーティリティ

server-onlyパッケージを使用すると、サーバー専用モジュールが誤ってClient Componentにインポートされた場合に、ビルドエラーが発生します。

// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file

export const db = createDbClient(process.env.DB_URL);

ServerとClient間での状態共有

Server Componentsは状態を保持できません。サーバーで取得したデータをインタラクティブなClient Componentsと共有するには、初回レンダリング時にpropsとして渡し、その後の更新をクライアント側で管理します。

use clientを追加するタイミング

次のいずれかが必要な場合に'use client'を追加します。フック（useState、useEffect）、ブラウザイベント（onClick）、ブラウザAPI（localStorage、window）、またはサードパーティのクライアント側ライブラリです。

確認問題

Next.jsのApp RouterでuseStateやonClickを使用するには、ファイルの先頭に何を追加する必要がありますか？

まとめ

App Routerのすべてのコンポーネントは、デフォルトでServer Componentsです。JSバンドルを必要とせず、データに直接アクセスできます。インタラクティブ性が必要な箇所にだけ'use client'を追加してください。サーバーで取得したデータをpropsまたはchildrenとしてClient Componentsのラッパーに渡して組み合わせ、クライアント境界はできるだけ末端に配置します。

よくある質問

「Next.jsのServer ComponentsとClient Components」レッスンは無料ですか？

はい。「Next.jsのServer ComponentsとClient Components」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Next.jsのServer ComponentsとClient Components」で何を学びますか？

'use client'を追加するタイミングと、server treeとclient treeを組み合わせる方法を判断します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Next.jsのServer ComponentsとClient Components」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

App Routerのファイル規約
Next.jsのServer ComponentsとClient Components
Dynamic RoutesとRoute Groups
Metadata APIとApp RouterのSEO

← React Academyに戻る