Next.js 13.2 => サーバーコンポーネントとクライアントコンポーネントの使い分け
はじめに
Next.js 13.2で、サーバーコンポーネントとクライアントコンポーネントの概念が導入されました。この記事では、それぞれの違いと、ユースケースについて解説します。
サーバーコンポーネントとクライアントコンポーネントの違い
-
レンダリング環境
サーバーコンポーネントは、サーバー上でレンダリングされ、クライアントには HTML が送られます。一方、クライアントコンポーネントは、サーバーでプリレンダリングされた後、クライアントで JavaScript によってハイドレートされます。 -
使用目的
サーバーコンポーネントは、主にデータフェッチやバックエンドリソースへのアクセス、秘密情報の保持、クライアントへ送信する JavaScript の量を削減するために使用されます。一方、クライアントコンポーネントは、インタラクティブな機能やイベントリスナー、状態管理、ブラウザ固有の API の使用に適しています。
使い分け方
-
データフェッチング
できるだけサーバーコンポーネント内でデータを取得することが推奨されています。これにより、パフォーマンスが向上し、ユーザーエクスペリエンスが向上します。 -
バックエンドリソースへのアクセス
サーバーコンポーネントは、バックエンドリソースに直接アクセスできます。API キーやデータベースへのアクセスなど、サーバー上で行うべき処理はサーバーコンポーネントで実装しましょう。 -
インタラクティブな機能
イベントリスナーや状態管理が必要なコンポーネントは、クライアントコンポーネントとして実装します。これにより、インタラクティブな機能が正しく動作し、ユーザーエクスペリエンスが向上します。 -
パフォーマンス最適化
クライアントコンポーネントをコンポーネントツリーの葉に移動し、サーバーコンポーネントで静的な要素をレンダリングすることで、アプリケーションのパフォーマンスを向上させることができます。
書き方
サーバーコンポーネント:
サーバーコンポーネントは、デフォルトでサーバーコンポーネントとして扱われるため、特別な記述は必要ありません。
クライアントコンポーネント:
クライアントコンポーネントは、ファイルの先頭に use client ディレクティブを追加することで定義します。
// @use client
import React, { useState } from 'react';
function MyClientComponent() {
const [count, setCount] = useState(0);
return (
<div>
<h1>クライアントコンポーネントです</h1>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
</div>
);
}
export default MyClientComponent;
ディレクトリ構成
サーバーコンポーネントとクライアントコンポーネントのファイル名に特別な命名規則はありません。ですが、コンポーネントの種類を明確にするために、以下のような方法が考えられます。
1. ファイル名やフォルダ名に接尾辞を付ける
例: サーバーコンポーネントの場合、MyServerComponent.server.tsx
クライアントコンポーネントの場合、MyClientComponent.client.tsx
2. サーバーコンポーネントとクライアントコンポーネントのフォルダを分ける
src/
├── components/
│ ├── server/
│ │ ├── MyServerComponent.tsx
│ │ └── AnotherServerComponent.tsx
│ └── client/
│ ├── MyClientComponent.tsx
│ └── AnotherClientComponent.tsx
まとめ
この記事では、Next.js 13.2で導入されたサーバーコンポーネントとクライアントコンポーネントの違い、使い分け方、それぞれの書き方、およびディレクトリ構成について解説しました。サーバーコンポーネントは主にデータフェッチやバックエンドリソースへのアクセスに適しており、クライアントコンポーネントはインタラクティブな機能や状態管理に適しています。適切な使い分けを行うことで、アプリケーションのパフォーマンスやユーザーエクスペリエンスを向上させることができます。また、コンポーネントの種類を明確にするために、ファイル名やフォルダ構造に工夫をすることが役立ちます。
Discussion