Server ComponentsとClient Componentsの概要

Next.js 13では、Server ComponentsとClient Componentsが導入され、各コンポーネントの実行環境をサーバーかクライアントで選択できるようになりました。この2つのコンポーネントは、アプリケーションのパフォーマンスとユーザー体験を最適化するために使い分けることが重要です。

• Server Componentsはサーバー上でレンダリングされ、クライアントにHTMLを送信します。これにより、クライアント側でのJavaScriptの量を減らし、パフォーマンスを向上させます。
• Client Componentsはクライアントで実行され、ユーザーインタラクションや状態管理を担当します。ブラウザ上で実行されるため、useStateやuseEffectなどのReactフックを使うことができます。

Server Componentsの利点

パフォーマンスの最適化

Server Componentsは、サーバーでレンダリングされたHTMLを直接クライアントに送信するため、クライアントに送るJavaScriptを減らすことができます。これにより、ページの初期読み込み速度が向上し、ユーザー体験が改善されます。たとえば、データベースからのデータ取得や非対話的なコンテンツ（記事の一覧など）を表示する際に適しています。

SEO向上

サーバーでレンダリングされたHTMLは、検索エンジンに対して容易にクロールされやすく、SEOの向上にも寄与します。静的なコンテンツを扱うページでは、Server Componentsの使用が推奨されます。

Client Componentsの利点

ユーザーインタラクションの処理

Client Componentsは、ユーザーとのインタラクションや動的な状態管理を担います。たとえば、フォーム入力やボタンのクリック、リアルタイムの更新が必要な機能に向いています。ブラウザ上で実行されるため、Reactフックを使用して動的なコンポーネントを作成できます。

ブラウザAPIの使用

Client Componentsは、windowやdocumentなどのブラウザAPIにアクセスする必要がある場合に使用します。アニメーションやイベントリスナー、DOMの操作を行う場面では、Client Componentsが適しています。

実際の使い分けの例

以下は、Server ComponentsとClient Componentsを組み合わせた実装例です。

Server Componentsの例

// app/server-component.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return (
    <div>
      <h1>Server-rendered Data</h1>
      <p>{data.message}</p>
    </div>
  );
}

Client Componentsの例

// app/client-component.tsx
'use client';
import { useState } from 'react';
export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Client-side Counter</h1>
      <p>The count is: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

これらを組み合わせることで、データ取得はサーバー側で行い、インタラクティブな部分はクライアント側で処理するという効率的な設計が可能になります。

まとめ

Next.js 13で導入されたServer ComponentsとClient Componentsを適切に使い分けることで、パフォーマンスとユーザーエクスペリエンスを大幅に向上させることができます。静的なコンテンツやデータ取得にはServer Components、ユーザーインタラクションにはClient Componentsを使うことで、効率的なWebアプリケーションの開発が可能です。