[今さら始める 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量	少なくしやすい	増えやすい

データ取得の基本

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>
  );
}

ページ表示に必要なデータをサーバー側で準備してからHTMLを返せるため、初期表示やSEOの面でも扱いやすくなります。

並列取得を意識する

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

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

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

実務での使い分け

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

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