[Next.js App Router] Server Components と SSR の概念理解・違いについて

はじめに

今回は、業務で Next.js 14 (App Router)を用いた実装で、Server Componet の概念、SSR との違いなどについて理解が曖昧だったので簡潔に整理してみました

対象読者

• Server Compoent の挙動についてイマイチわかっていない
• Server Component と Client Component の違いについて知りたい
• Server Component と SSR の違いについて腑に落ちていない

レンダリング環境について

• クライアント
  • ブラウザを指し、サーバーにアプリケーションコードのリクエストを送信する。その後、サーバーからのレスポンスを UI に変換する
• サーバー
  • データセンター内のコンピュータを指し、アプリケーションコードを保存し、クライアントからのリクエストを受信して適切なレスポンスを返す

Server Compornents とは？

• JS コードをクライアントで実行しなくてもいいコンポーネントをマーキングするだけの機能
• サーバーだけで完結できるコンポーネントは、サーバーで効率よく処理を済ます
• いつから導入されたの？
  • 2023 年 5 月にリリースされた Next.js 13.4 で使えるようになった新たな機能
• 使用する目的
  • UX の向上
  • サービスの安全性向上
• サーバーレンダリングの利点
  • データ取得
    • データ取得をサーバーに移行できるので、レンダリングに必要なデータを取得する時間を短縮し、クライアントのリクエスト数を減らすことでパフォーマンスの向上が見込める
  • セキュリティ
    • トークンや API キーなどの機密データとロジックをクライアントに公開せずサーバーに保持できる
  • キャッシング
    • サーバー側で取得したデータはキャッシュされ、後続のリクエストやユーザー間で再利用できる
    • キャッシュの設定についてもカスタマイズできる
  • パフォーマンス
    • クライアント側のJSコードの実行量を削減できるので速度アップが見込める
• どのようにレンダリングされるのか？
  • サーバー側で行われていること
    1. サーバーコンポーネントを特殊なデータ形式 (RSC Payload) に変換
       1. RSC Payload (React Server Component Payload) は、レンダリングされた React Server Components tree のコンパクトなバイナリ表現のこと
       2. クライアント上の React によって、ブラウザの DOM を更新するために使用される
    2. 上記を HTML としてレンダリングする

SSR (Server Side Rendering) とは？

• 「どのようにページ全体を最初にレンダリングするか？」というレンダリング手法
• サーバー側でリクエストがある度にレンダリングをおこなう
• ページ全体の HTML を事前に生成 (プリレンダリング) し、それを高速でクライアント(ブラウザ)に返す
• 使用する目的
  • コンテンツの初回描画速度の向上
  • SEO の向上

Server Component と SSR の違い

• 従来の SSR (Pages Router) では、サーバー側でプリレンダリングする際に実行される JS コードが、クライアント側でも再度ハイドレーション時に JS コードが実行されてしまっていた
• Server Component は、サーバー側でプリレンダリング時に JS コードを実行してクライアントにはレンダリングした HTML と RSC Payload の JSON データを返却するので、クライアントで JS コードのバンドル (ハイドレーション) が行われない
• なので、「SSR の中に Server Component が組み込まれて共存している」というのが現状での認識

おわりに

今回は、Next13.4 からデフォルトになった Server Component について曖昧なところを少し深掘りして理解できたので、今後の実務や個人開発でのコンポーネント設計に活かせれたらと思います。

また、SSR と Server Components の定義の違いも曖昧だったので整理できて良かったです

参考文献

Next.js 日本語ドキュメント - Server components