【Next.js】レンダリングの CSR/SSG/SSR/ISRをまとめる

フロントエンドエンジニアの茶木です。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 こちらの本を読みすすめています。Next.js は多機能です。ゆえに、実際に開発に携わっていても理解が浅い部分ができてしまうもの。一度通して読んでおくと弱い部分がわかるので（まだ読了してないのですが）良さそうです。

今日注目するのは、Next.js のレンダリングです。当書の説明がわかりやすかったので自分なりに噛み砕いでまとめます。

レンダリングの種類

• CSR : クライアントサイドレンダリング
• SSG : 静的サイト生成
• SSR : サーバーサイドレンダリング
• ISR : インクリメンタル静的再生成

CSR クライアントサイドレンダリング

React は JavaScript でページを描画しています。この単純な使い方がCSRです。
もともとの React アプリケーションに近い描画方法なので、簡単ですね。

CSR の弱点は、ブラウザで表示したときに JavaScript で描画するために、初期状態でコンテンツがなく、SEO に有効ではない点があげられます。

SSG 静的サイト生成

SSGではビルド時にAPIなどからデータを取得して、ページを描画して静的ファイルとして生成します。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 3.7.1 静的サイト（SSG）p.114

ここが理解しにくい部分だと思うのですが、JavaScript は本来コンパイル不要の言語なので、そもそもビルドってなんだって話なんですよね。

ここでいうビルドは静的ページの生成と考えれば良いです。ビルドの際にあらかじめ、API などをコールして propsを取得し React がページを生成します。このページを静的ページとしてビルド結果に保存します。この保存結果はサーバーにリクエストがあったときに返されるページで、初期状態は JavaScript による描画は不要でコンテンツが存在するので、高速で SEO にも有効です。

SSR サーバーサイドレンダリング

ページへのアクセスがある毎に、サーバーがデータを取得し（APIコールし）サーバー側で描画して、クライアントへ渡します。こちらも初期状態でコンテンツが存在するので SEO にも有効です。

弱点はページへのアクセスごとに、サーバーでデータ取得とページ生成の処理が走ることです。

このサーバー側で描画するというのが、人によっては理解しにくいのではないかなと思います。サーバー側でも Node.js のような技術で （実際 Node.js を使うかは定かではないが）JavaScript を動かせるので、サーバーサイドでもページの描画ができるのです。

ISR インクリメンタル静的再生成

SSG と SSR の間のようなレンダリング方法です。

SSR と同様に、ページへのアクセス時に、サーバーがデータを取得し（ APIコールし）サーバー側で描画して、クライアントへ渡しますが、ここで生成したページをキャッシュします。以降のページへのアクセス時では、SSG のようにキャッシュしたページをクライアントに渡します。

キャッシュには有効期限があり、有効期限が過ぎてページにアクセスがある場合、改めてサーバー側でページの生成を行います。

SSG の弱点である（ビルド時点のデータで固定しちゃってるので）古いデータが初期表示で表示されてしまうケースが、ある程度減らせ、かつサーバーの処理も SSR ほど激しくないという特徴があります。

使い方と使い分け

• CSR: 他のレンダリングタイプと併用できる。初期描画が重要でなく、リアルタイム性が重視されるページに向く
• SSG: getStaticProps を使うとビルド時に静的ページとして生成される。初期描画が高速で、パフォーマンスに優れるが、リアルタイム性が重視されるページには向かない
• SSR: getServerSideProps を使うとアクセス時にサーバーでページが生成されるようになる。初期描画が重要かつ、リアルタイム性が重視されるページに使う。パフォーマンスは悪い。
• ISR: getServerSideProps に 有効期限を指定すると ISRになる。SSGとSSRの中間。データの更新頻度に合わせて有効期限を指定できればうまく機能する。

おわりに

サーバーのデータ更新の頻度や、SEO とも結びつくので、プロダクトの背景を意識してレンダリングの種類を選ぶ必要がありますね。