【Next.js】RSCとは？CSR/SSR/SSG/ISRの違いまとめ
はじめに
レンダリング手法の違い、React Server Componentsについて調べてみても難しい記事しかなかったため簡潔にまとめてみました。
厳密には違う部分があるかもしれません。
以下、クライアント＝ブラウザの意図で使用しています。
CSR（クライアントサイドレンダリング）
CSRの特徴
CSRはクライアント側でjavascriptを実行してwebページを生成する手法です。
初回読み込みの遅延
CSRでは、初回に全てのjavaScriptをダウンロードして実行するため、初回の読み込みには時間がかかります。
初回以降の操作が高速
一度ページが読み込まれると、以降の操作では差分のみをレンダリングし、クライアント側でDOMの差し替えを行うため、サーバー側にリクエストする必要がなく高速で動きます。
このようなwebアプリケーションのことをSPAと呼びます。
SEOに不利
初期状態ではHTMLにほとんどのコンテンツが含まれず、クローラーが内容を認識しづらいため、SEOには不利です。
CSRのしくみ
CSRの動作フローは次のようになります。
- クライアントがリクエストをし、サーバーが空のHTMLを返却
- クライアント側はHTMLを解析し、CSSファイルを認識してダウンロード
- HTMLの中のscriptタグを認識し、javascriptファイルをダウンロード
- 空のHTMLに<App/>コンポーネントを挿入
CSRに向いているアプリケーション
CSRは、動的でインタラクティブなアプリケーションに最適です。特に、リアルタイムでユーザーが操作する以下のようなアプリケーションに向いています。
- Todoアプリ
- リアルタイムチャットアプリ
- オンラインゲーム
SSR（サーバーサイドレンダリング）
SSRの特徴
SSRはリクエスト時にサーバー側でHTMLを生成し、それをクライアント側に送る手法です。
初回読み込みが高速
サーバー側で事前にレンダリング（プリレンダリング）したHTMLをクライアント側で表示するだけなので、javascriptの実行に時間がかからず、CSRと比べ初回読み込みが高速です。
SEOに強い
サーバー側で事前にHTMLを構築しておりクローラーが内容を認識しやすいため、SEOに強いです。
初回以降のレンダリングが遅くなる
各リクエストごとにサーバー側でレンダリングを行うため、CSRと比べて初回以降のレンダリングは遅くなります。
SSRのしくみ
SSRの動作フローは以下のようになります。
- クライアントがサーバーにwebページのリクエストを送る
- サーバーが必要なデータを取得し、レンダリングする
- サーバーは生成したHTMLをクライアントに返却する
- クライアントが受け取ったHTMLを表示する
- ハイドレーションを行う（静的なHTMLを受け取りjavascriptを実行することで動的な処理を追加すること）
SSRに向いているアプリケーション
SSRはユーザー操作で頻繁に更新されず、コンテンツ重視でSEO対策が必要なアプリケーションに最適です。
- ブログ
- ECサイト
- 求人情報サイト
SSG（静的生成）
SSGの特徴
SSGはビルド時にサーバー側でHTMLを生成し、それをクライアント側に送る手法です。動的なコンテンツがなく、静的なページに限ります。
初回読み込みが非常に高速
HTMLが事前に生成されており、クライアント側は表示するだけなので初回読み込みが非常に高速です。
SSGのしくみ
SSGの動作フローは以下の通りです。
- ビルド時にHTMLを生成
- クライアントがサーバーにwebページのリクエストを送る
- サーバーは事前に生成してあるHTMLをクライアントに返却する
- クライアントが受け取ったHTMLを表示する
- ハイドレーションを行う
SSGが向いているアプリケーション
SSGは、コンテンツの更新頻度が少ないwebアプリケーションに最適です。
- ヘルプページ
- ポートフォリオサイト
ISR（インクリメンタル静的生成）
ISRの特徴
ISRは、SSGとSSRの長所を組み合わせたレンダリング手法です。
初回は静的生成
ビルド時にサーバー側でHTMLを生成し、キャッシュします。
キャッシュの利用で高速
初回以降のリクエストでは、キャッシュされたHTMLが返却されるため、高速にページを表示します。
再ビルド
コンテンツを更新しても、キャッシュされた古いデータが表示されることがありますが、一定の時間が経過したら、サーバー側で再ビルドが行われます。再ビルドが完了すると、次のリクエストから新しいHTMLが返されます。再ビルドの時間は設定することができます。
ISRのしくみ
ISRの動作フローは以下のとおりです。
- ビルド時にHTMLを生成
- クライアントがサーバーにwebページのリクエストを送る
- サーバーは事前に生成してあるHTMLをクライアントに返却する
- クライアントが受け取ったHTMLを表示し、CDNがキャッシュを行う
- 再びクライアントがリクエストを行うとCDNがキャッシュされたHTMLを返却し、クライアントがそれを表示する
- 設定された時間が経過し、クライアント側がリクエストすると、CDNは古いキャッシュを返しつつ、サーバー側で再ビルドを行う。
- 再ビルド完了後、次のクライアントからのリクエストで新しいHTMLが返却される
ISRが向いているアプリケーション
ISRは、SSRほど更新頻度が高くなく、SSGよりは更新があるアプリケーションに最適です。
- ブログ
- 記事投稿サイト
RSC（React Server Components）とは
RSCとはコンポーネント単位でレンダリング方式をSSRまたはCSRに分けることができる技術のことです。特定のコンポーネントをサーバーサイドでレンダリングし、それ以外の部分をクライアントサイドでレンダリングします。
Next.jsのApp RouterはRSCの技術を使用しています。
App Routerではデフォルトで全てのコンポーネントがRSCです。"use client"の記述をすることでクライアント側でレンダリングする境目を示すことができます。
SSRとRSCは異なる
SSRはページ全体をサーバーサイドでレンダリングしクライアントに完全なHTMLを返却するのに対し、
RSCは特定のコンポーネントをサーバーサイドでレンダリングし他の部分はクライアントサイドでレンダリングします。
まとめ
SSRとRSCの違いは厳密には理解しきれていない部分もありますが、ざっくりとまとめてみました。
ReactはCSRしかサポートしていませんでしたが、Next.jsはレンダリング手法を組み合わせることで、アプリケーションのパフォーマンスやユーザーエクスペリエンスを向上させることができます。
Discussion