App Router SSR 環境で ClientComponent を理解する

2025.1.20

その他

こんにちは、フロントエンドエンジニアのよしざわです。
Gaji-Lbo では React や Next.js を利用したプロダクトの開発支援等を行っています。今回は、開発の中で重要だと感じた App Router SSR 環境での Client Component 利用時の注意点についてまとめたいと思います。

SSR とは

まず前提となる SSR についておさらいします。SSR とは、サーバー側で React コンポーネントをレンダリングし、その結果を HTML としてクライアントに送信する手法です。これにより、初回ロード時のパフォーマンスが向上し、SEO 対策にも効果的です。

SSR 環境で ClientComponent がどのようにレンダリングされるか

SSR 環境ではサーバー側で React コンポーネントがレンダリングされ、HTML としてクライアントに送信されます。一般的に ClientComponent はクライアント側でインタラクティブに動作するコンポーネントですが、サーバー側でもプレースホルダーとしてレンダリングされます。

よって、ClientComponent であっても一度サーバー側で実行されることに注意して実装を行う必要があります。

SSR 環境で ClientComponent を利用する場合の tips

これまでの前提を踏まえて、私が SSR 環境で ClientComponent を利用する上で重要だと感じた点を列挙します。

1. ClientComponent であることが SEO に不利になるわけではない

ClientComponent であっても、状態管理と関係しない部分やイベントリスナー以外はサーバー側で HTML としてレンダリングされた状態で送信されます。これは、ブラウザの JavaScript を無効にした状態で ClientComponent のみを使用したページを表示したり、サーバーから返却された HTML ファイルを調査することで確認できます。
レンダリング結果を見て確認する必要はありますが、SEO 観点で重要なコンポーネントであっても、 ClientComponent として扱っても問題無いことが多いです。

2. サーバー実行時とブラウザ実行時に処理を分けることができる

Hydration Error になる可能性があり用途は限定的ですが、サーバー実行時とブラウザでの実行時で処理を分けることができます。

const router = useRouter();
if (typeof window === 'undefined') {
  // server
  return redirect('/');
} else {
  // client
  return router.push('/');
}