はじめに

CSR/SSR/SSG/ISRの内容に関しては、ずっとブログで書こうと思っていたのになかなか一歩が出なかった今日この頃ですが、年末ということもあり、この機会に頑張って書いていこうと思います。
さて前置きはこんなところで、早速内容に入っていきます。
この記事でやらないこと

• CSR/SSR/SSG/ISRを使っての開発方法（今回はCSR/SSR/SSG/ISRとはこういうものだ、こう違うのだっていう内容です）

前提条件

• Next.jsを使用すると考えて書きます
• SSGはタイトルでは三文字の方が綺麗なのでSSGにしてますが、文章中ではSGで書いてます。（公式がSGなので。ややこしいことしてすみません。）

CSR/SSR/SSG/ISRとは

CSR

Client Side Rendering = クライアント側でのレンダリング
CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。
全てがクライアント側で完結するので、実装も運用もシンプルです。
しかし、CSRには以下のようなデメリットがあります。

• クライアントのリクエストに対して空のHTMLを返すため、SEOとOGPに対応できない
• クライアント側でJSを実行するため、初期表示が遅い（初回以降のページ遷移は高速）

※ちなみに、CSR で配信されているアプリケーションを一般的に SPA（Single Page Application）と呼びます

SSR

Server Side Rendering=サーバ側でのレンダリング
先ほど上げたCSRの問題点を解決してくれるのが、SSRです。
SSRではクライアントのリクエストに対してサーバ側でデータを取得してHTMLを生成し、それを返します。
サーバ側でHTMLを生成するため、SEOとOGPに対応可能ですし、初期表示も高速です。
「そうか！ならSSRを使ってサイトを作るのがベストなんだな！」
って思った方、
以下はNext.js公式の文章を抜粋しました。

Server-side Rendering: The HTML is generated on each request. To make a page use Server-side Rendering, export getServerSideProps. Because Server-side Rendering results in slower performance than Static Generation, use this only if absolutely necessary.
「スタティック・ジェネレーション（SG）よりもパフォーマンスが落ちるので、絶対に必要な場合のみ、これを使用してください。」

公式から言われてますね。必要な場合のみ使えと、基本SGを使えと。
ただし、常に最新の情報を取得したい場合(YoutubeやTwitterのようなアプリ)では、SGよりもSSRの方が良いらしい（SSRを使ったことがないのでなんとも言えないです😰）

SSG(SG)

Static Site Generation=静的サイト生成
（SGはStatic Generation）
SSG はビルド時に HTML などのコンテンツが生成され、各リクエスト時に再利用してブラウザに渡す手法です。
CSR・SSR はリクエスト時にビルドを行なっていましたが、SSG は事前に作成された静的ファイルを返すだけなので表示速度が CSR・SSR に比べ高速です。
「そうか！ならSGを使ってサイトを作るのがベストなんだな！」
って思った方...間違ってはいませんが、もっと上があります。
と言うのも、SGだけだと、ページの更新時にアプリケーション全体をビルドしないといけないためページ数が多い大規模なアプリケーションには不向きだからです。
この問題を解決してくれるのが、ISRです。

ISR

Incremental Static Regeneration=定期的な静的再生成
ISRではgetStaticPropsのrevalidateオプションを使います。
例えば、revalidateを5に設定すると、5秒ごとに最大1回の更新が可能になります。
ただし、ISRではrevalidateで指定した時間が経過しないと古い情報が返されることになるので、常に最新の情報を表示する必要があるシステムには向いていません。
この場合は先ほども言った通りSSRを使いましょう。
ではいつ使われるのか？？
その際たる良い例として、Zennがありました。作者であるcatnoseさんがブログを書いてました。
https://zenn.dev/catnose99/articles/8bed46fb271e44
（尚、現在はVercelからGoogle Cloudに移行したようで、ISRは使っていないそうです。現在2022/12/27）
ユーザー生成でコンテンツ更新がそこそこの頻度であるものの、必ずしも最新であることは求められないシステムがISRにぴったりのようですね。

まとめ

さて今回は、CSR/SSR/SSG/ISRについてブログを書きました。
個人的感想しては、「なんとなく理解してた部分を、最低限理解できた」気がします。
SGに関しては、Next.jsを触って「ビルド時に色々やってる」「他と比べて圧倒的に早い」「CSRではSEO対策できないけど、SG使えばSEO対策できる！」みたいなほんとに適当なことしか知らなかったです。
SSRに関しては今回調べて初めて内容を理解しました😭
まあそれでも間違って理解している部分や、まだ理解しきれていない部分もあるかと思いますので、随時この内容も更新されるかなと思います。

参考記事

最後に参考にした記事を載せておきます。（かなりたくさん読みました。）
https://nextjs.org/learn/basics/create-nextjs-app?utmsource=next-site&utmmedium=homepage-cta&utm_campaign=next-website
https://zenn.dev/adachi/articles/105dac5573b2f5
https://zenn.dev/catnose99/articles/8bed46fb271e44
https://zenn.dev/bitarts/articles/37260ddb28ae5d
https://shimablogs.com/spa-ssr-ssg-difference
https://serip39.hatenablog.com/entry/2020/08/23/225000
https://qiita.com/amakawa_/items/e7d0720e1ab8632769bf
https://qiita.com/Nishi53454367/items/c49d859f32f7c4708c04
https://qiita.com/Sinhalite/items/762f192459994b915380
https://zenn.dev/luvmini511/articles/1523113e0dec58