Next.jsでは、Server ComponentsとClient Componentsの使い分けが、パフォーマンスや機能性の最適化において重要な要素となっています。これら2つのコンポーネントは、それぞれ異なる用途とメリットがあり、適切に使い分けることで、より効率的なWebアプリケーションの開発が可能です。

Server Componentsとは？

Server Componentsは、サーバー側でレンダリングされるコンポーネントで、以下の特徴を持っています。

  • データフェッチやバックエンドリソースの利用：サーバー側でデータを取得し、クライアントに送信することで、クライアントへの負担を軽減します。
  • パフォーマンス最適化：クライアントに送信されるJavaScriptコードを削減し、ページの読み込み速度を向上させます。
  • SEOに有効：サーバー側で生成されたHTMLが直接クライアントに送信されるため、検索エンジンに適したページ構成を提供できます。 Server Componentsは、基本的に静的なコンテンツや、ユーザーインタラクションが不要な部分に最適です。たとえば、記事リストの表示やデータベースからの情報取得に適しています。

使用例

export default async function ServerComponent() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return (
    <div>
      <ul>
        {data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

Client Componentsとは？

一方、Client Componentsは、クライアント側でレンダリングされるコンポーネントです。以下の特徴があります：

  • インタラクティブな機能：ボタンのクリックやフォーム送信など、ユーザーとのやり取りが必要な場面に使用します。
  • 状態管理：ReactのuseStateやuseEffectなどのフックを使用して、クライアント側で動的に状態を管理できます。
  • ブラウザ専用のAPI：ローカルストレージやイベントリスナーといったブラウザAPIを使用する際に必要です。 Client Componentsは、UIの一部がユーザーとのインタラクションに依存する場合に最適です。たとえば、ボタンやフォーム、モーダルウィンドウの制御に向いています。

使用例

'use client';
import { useState } from 'react';
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <button onClick={() => setLikes(likes + 1)}>
      Like ({likes})
    </button>
  );
}

適切な使い分け

Next.jsでは、基本的にすべてのコンポーネントがデフォルトでServer Componentsとして扱われますが、インタラクティブな機能が必要な場合はuse clientを指定してClient Componentsに切り替えます。これにより、サーバーでの処理とクライアントでの処理を効果的に分離し、パフォーマンスを最大限に引き出せます。 例えば、ブログ記事の一覧はServer Componentsでレンダリングし、各記事に「いいね」ボタンを設置する場合、そのボタン部分のみをClient Componentsにすることで、効率的なレンダリングを実現できます。

まとめ

Server ComponentsとClient Componentsの使い分けは、アプリケーションのパフォーマンスとユーザー体験を最適化するために不可欠です。データフェッチや静的コンテンツにはServer Componentsを、インタラクティブな機能や状態管理にはClient Componentsを使用することで、両者の利点を活かすことができます。

参照:

ServerComponentsとClientComponentsの使い分け方