はじめに
個人開発での開発言語にNext.jsを採用しました。
開発を進めるなかで、ClientComponentとServerComponentの境界を曖昧にしてしまっていたので、備忘も兼ねて整理してみます。
Componentとは
Component（コンポーネント）とは、ソフトウェアやシステムを構成する再利用可能な部品のことであり、それぞれが独立して機能します。
これらを組み合わせることで柔軟性や保守性を高めることができ、結果としてシステム開発、メンテナンスがしやすくなるメリットがあります。
よく車に例えられるとおり、システムが車だとすればコンポーネントはハンドル、タイヤ、シート等の部品です。
一つの車を作るために、様々な独立した部品を組み合わせます。
Next.jsにおけるコンポーネントは、クライアントコンポーネント、サーバコンポーネントの2種類があります。
ClientComponentとは
ブラウザ側、クライアントサイドで作成されるコンポーネント。
使い方としては、"use client";をファイル冒頭につけます。
"use client";
import xxx from "yyy/xxx";
export function SampleComponent() {
// some codes
};
クライアントコンポーネントでは、コンポーネントの状態管理、ブラウザAPIの使用、DOM操作ができるのが特徴です。
そのため、例えばこんなケースで使用します。
- ReactのHooksを使用したいとき
- ユーザ操作に応じた動的処理（イベントハンドリングなど）
- sessionStorageへのデータ保存
ServerComponentとは
サーバ側で作成されるコンポーネントです。
Next.jsでは基本がこのサーバコンポーネントになり、特別な記載は不要です。
サーバコンポーネントでは、DB操作、SEOに有利な静的ページの取得などができるのが特徴です。
またサーバ側で処理をするため、機密情報の取り扱いもここで実行できます。
上記の理由
・SEOに有利な理由：サーバ側でHTMLに含めた状態でページ生成し、ブラウザ・検索エンジンへ返却できるため。・機密情報に向いている理由：APIキーや秘密鍵を使った処理について、サーバ側で処理が終わった状態でブラウザへ返せるため、漏洩リスクが低い。
そのため、例えばこんなケースで使用します。
- DB、API、ファイル等へのフェッチ
- 認証処理
- その他静的コンテンツのレンダリング
2つの違い
1. 実行場所の違い
クライアントコンポーネントの場合
サーバレンダリングで初期表示を行い、以降はstateに変更があれば都度クライアント側で再レンダリングを行います。（実行場所 = クライアント）
サーバコンポーネントの場合
サーバでレンダリングされてブラウザへ送られます。（実行場所 = サーバ）
以降、特別な操作（ページ移動など）をしない限り再実行はされません。
2. 使用ケースの違い
実行場所の違いにより、得意なこと・苦手なことが異なります。
前述したとおりですが、
クライアントコンポーネント：状態管理やイベント処理、ブラウザAPIの使用など、インタラクティブなUIを実現するもの
サーバコンポーネント：データフェッチや認証処理など、外部アクセスを行うもの
などが得意なこととなります。
上記を踏まえて設計することが大事になってくるかと思います。
まとめ
自分の知識不足による設計不良がきっかけで一度整理してみました。
実際に開発する場合はコンポーネントを組み合わせることでハイブリッドなページに仕上がることが多いと思いますが、参考になりますと幸いです！