[今さら始める Next.js マスター #3] Server Componentsとデータ取得

Server Componentsとは

Server Componentsは、サーバー側で実行されるReactコンポーネントです。ブラウザへ送るJavaScriptを減らしながら、データベースや外部APIに近い場所で処理できます。

Next.jsのApp Routerでは、コンポーネントは標準でServer Componentとして扱われます。ブラウザ側の状態やイベントが必要な場合だけ、"use client"を付けてClient Componentにします。

Client Componentsとの違い

項目	Server Component	Client Component
主な役割	サーバーでデータ取得・描画	ブラウザで状態・操作を扱う
状態管理	useState不可	useState使用可
イベント	onClick不可	onClick使用可
データ取得	直接書きやすい	API経由になりやすい
JavaScript量	少なくしやすい	増えやすい

Client Componentも初回表示のHTMLをサーバーで生成する場合があります。"use client" は「一切サーバーで描画しない」という指定ではありません。境界の考え方は公式のServer/Client Componentsの説明で確認できます。

データ取得の基本

Server Componentではasyncコンポーネントとしてデータを取得できます。

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

getPosts() はNext.jsの組み込み関数ではなく、自分で用意するデータ取得処理です。ここでは id と title を持つ投稿配列を返す前提で、まず取得した値が map() から一覧へ渡る流れを読みます。後の getProfile() も別途用意する関数で、例だけをコピーしてデータ取得まで完成するものではありません。

並列取得を意識する

複数のデータが互いに依存していない場合は、順番に待たずに並列で取得します。

const [posts, profile] = await Promise.all([
  getPosts(),
  getProfile(),
]);

不要な待ち時間を減らすだけで、体感速度が大きく変わることがあります。

実務での使い分け

データ表示中心のページはServer Component、クリック操作やフォーム入力などユーザー操作が中心の部品はClient Componentに分けると考えやすくなります。

最初は「サーバーでできることはサーバーに寄せる」「ブラウザでしかできないことだけクライアントに置く」と覚えておくと、Next.jsらしい設計に近づきます。