Frontend Academy · レッスン

Server ComponentsとClient Components

React Server Componentsの仕組み、「use client」ディレクティブを追加するタイミング、サーバーでレンダリングしたHTMLとインタラクティブなクライアントアイランドの組み合わせ方を理解します。

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

1つのアプリにある2つの世界

React Server Components（RSC）を使うと、ツリーをサーバーでレンダリングする部分と、クライアントで操作できる部分に分割できます。Next.js App Routerでは、コンポーネントはデフォルトでServer Componentになります。Client Componentにするには'use client'を指定します。

Server Componentsの役割

Server Componentsはサーバー上でのみ実行されます。データを直接取得する、ファイルシステムにアクセスする、サーバー専用のシークレットを使用する、Reactをクライアントに送ることなくHTMLにレンダリングするといったことができます。一方、フックの使用、状態管理、イベント処理はできません。

Client Componentsの役割

Client Componentsは、SSR（初期HTML）のためにサーバー上で実行され、インタラクティブ性のためにクライアント上でも実行されます。useState、useEffect、イベントハンドラー、ブラウザーAPIを使用できます。

デフォルトはServer

Next.js App Routerでは、すべてのコンポーネントがデフォルトでServer Componentになります。これは便利です。アプリの大部分を静的にレンダリングできるためです。

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Clientを明示的に指定する

ファイルの先頭に'use client'を追加すると、そのファイル内のコンポーネントと、そこからインポートされるコンポーネントがClient Componentになります。

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

ServerとClientの組み合わせ

Server ComponentsはClient Componentsをレンダリングできますが、Client ComponentsはServer Componentsをインポートできません。サーバーでレンダリングしたコンテンツは、Clientのラッパーにchildrenとして渡してください。

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

このパターンが重要な理由

JavaScriptバンドルを小さくできます。ブラウザーに送られるのはClient Componentsだけです。読み取り専用データなら、APIレイヤーを用意せずにデータベースやファイルへ直接アクセスできます。HTMLが完全にレンダリングされた状態で届くため、SEOが向上し、LCPも高速になります。

Client境界のルール

ファイルに'use client'を指定すると、そのファイル内のすべてのコンポーネントと、インポートした子コンポーネントがClient Componentsになります。'use client'は、サーバーとクライアントの境界を示します。

Server Actions

'use server'を付けた関数はサーバー上でのみ実行されますが、Client ComponentsからRPCのように呼び出せます。フォーム送信やミューテーションによく使用されます。

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

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

ServerからClientへ渡すPropsは、JSONにシリアライズ可能でなければなりません。関数、クラス、独自の形状を持つDateなどは渡せません。渡す前に変換してください。

それぞれの種類を見分ける

インポートを確認してください。useState、useEffect、onClickハンドラーを使うと、コンポーネントはClient Componentでなければなりません。純粋なデータ表示ならServerのままにできます。

パフォーマンス上の効果

Server Componentsによって、JavaScriptバンドルを大幅に小さくできます。ほとんどが静的コンテンツで、少数のインタラクティブなウィジェットを含むページでは、ウィジェットに必要なJavaScriptだけが送られるため、場合によっては90%も小さくなります。

クイックチェック

Next.jsのServer Componentで使用できないReactフックはどれですか？

振り返り：ServerとClient

Server Components：サーバー上でのみ実行され、async/awaitを使用でき、フック・状態・ハンドラーは使えず、バンドルを小さくできます。Client Components：'use client'で明示的に指定し、useState/useEffect/イベントによってインタラクティブにします。ServerはClientをレンダリングできますが、ClientはServerをインポートできません（ただしchildrenとして受け取ることはできます）。Server Actions（'use server'）は、RPC形式のミューテーションに使用します。

よくある質問

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

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

「Server ComponentsとClient Components」で何を学びますか？

React Server Componentsの仕組み、「use client」ディレクティブを追加するタイミング、サーバーでレンダリングしたHTMLとインタラクティブなクライアントアイランドの組み合わせ方を理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

← Frontend Academyに戻る