こんにちはnaoです。
最近Next.jsを使って開発をする機会が増えてきたのですが
レンダリングの種類が多くて何がなんだっけ、、
っとなりがちなので今回は自分なりにまとめてみようと思います。
レンダリングの種類としては以下が挙げられると思います。
- CSR：クライアントサイドレンダリング
- SSG：静的サイト生成
- SSR：サーバーサイドレンダリング
- ISR：インクリメンタル静的再生成
CSR（クライアントサイドレンダリング）
まずはCSRから。個人的にはSPAと一緒じゃないの！？
と思いたいところですが調べたところ
SPAはアプリケーションの種別であり、CSRはレンダリング技術のことを
さすようです。。
CSRの技術的内容
ではCSRはどのようなレンダリング技術なのでしょうか？
これはアクセス時のページ生成をクライアントサイド行うということです。
ユーザが初回アクセスをした際に必要なリソースを全て取得をしてき
その時取得したHTMLの中身は空で、その中で読み込まれるJavaScriptがページ全体を生成します。その後のページ遷移もJavaScriptで処理をするので
遷移のたびにWebサーバーへHTMLを要求をしないとのこと。
なので利用するユーザにとってはサクサク動く体験を提供できるが、当然デメリットもあり、CSRの弱点は初期状態は空でコンテンツがないためSEOには不利な点やアプリケーションが大規模になるとJavaScriptの量が多くなりレンダリングにかかる時間が長くなる。
SSG（静的サイト生成）
続いてはSSGです。
Next.jsを実際に触りだしてから知りました。
SSGの技術的内容
SSGはデプロイをする際にあらかじめレンダリングを行い、必要になるデータを埋め込んだ状態のHTMLを生成しておきます。
メリット
ユーザからのリクエストに応じてレンダリングをしないのでパフォーマンスが良い点。
デメリット
データの更新があった際に再度ビルドし直さないといけないので
頻繁に更新されるサイトには不向き。
SSR（サーバーサイドレンダリング）
お次はSSRです。
個人的にはMPA（マルチページアプリケーション）と呼ばれるRailsやLaravelのようなものじゃないのかなと思っていたのですが、似ている部分はあるものの厳密には違く
「フロントエンド用のJavaScriptフレームワークをサーバサイドで動かす」という意味で使っていることが多いようです。
SSRの技術的内容
リクエストがあった際、サーバー側で動的にHTMLを生成し、レンダリング済みのHTMLをレスポンスとして返し
ページのロジックとレンダリングを、CSRではクライアント側（ブラウザ）で行っていたのに対し、SSRでは Node.js のサーバー上で実行するということです。
メリット
ユーザの環境に依存せず、JavaScriptを大量にクライアントに送信をする問題を回避できる。
SSGと比べてデータの頻繁な更新にも対応できる。
デメリット
ユーザの環境には依存しなくなったが、リクエストごとにサーバー側で処理を行うのでサーバーサイドが重くなる可能性もある。
ISR（インクリメンタル静的再生成）
最後にISRです。
これが一番馴染みがなく難しい。。
ISRの技術的内容
ISR は SSG したページを revalidate で指定した時間を超えてからアクセスがあった時に、更新がないか再検証して、ページを更新する機能です。
メリット
キャッシュにより2回目以降の表示速度が速い。
デメリット
初回アクセス(つまりキャッシュがない場合)はSSR(またはCSR)になる
定期的なデータ更新により新しいキャッシュ生成後の1回目のリクエストでは古いキャッシュが返される。
まとめ
今回はNext.jsのCSR/SSG/SSR/ISRについてまとめてみました。
実際に使ってみないと概念が掴みづらい反面、知識としても押さえておかないと開発の時に苦労したのでもし誰かの役に立てたら嬉しいです！
ここまでみてくださりありがとうございました！
次回はNext.js App RouterでCSR/SSG/SSR/ISRの実装方法の記事をアップしたいと思います！