フロントエンド理解必須のCSR、SSR、SSG

今回はフロントエンドを語る上でおそらく理解が必須となる、CSR、SSR、SSGについてまとめてみました。
先に断っておくと、「何が正解か？」については述べていません。
また、初学者にわかりやすく説明しますので「厳密には異なる」部分もあるかもしれませんがご容赦ください。
ただ、根本が間違っていたらご指摘いただけると幸いです。

CSR（Client Side Rendering）

CSRはClient Side Rendering（クライントサイドレンダリング）の頭文字からきています。
読んで字の如く、クライアント、つまりユーザーからリクエストがあると、「ユーザー側で」画面を構築して描写します。
DOM操作を思い浮かべるとわかりやすいです。
ユーザーがクリックをしたらボタンの色を変える、文章を変えるなど、ユーザーのアクションに対してブラウザ上のDOMをその場で書き換えます。
生のJavaScriptや、特定のフレームワークを使用せずにReactを書くとCSRになります。

CSRのメリットとデメリット

メリット	デメリット
ページ遷移や変更が高速である	初回ロードが遅い
サーバーリクエスト回数が少ない	パフォーマンスがクライアント環境に依存する

CSRはクライアントサイドで働くので、初回リクエスト時にサーバから必要なリソースをすべて取得します。
ゆえに、その後のページ遷移やデータの変更等は高速に処理することが可能です。
一方で、クライアント側のパソコンの性能や、ネット環境に依存するので、パフォーマンスが人それぞれで異なる可能性があります。
また、初回リクエスト時に全てのリソースを取得することから、初回のロードが遅くなる傾向にあります。
以前はSEOについてもデメリットとして知られていましたが、近年は検索エンジンも進化しており、影響はそこまで大きくないとも言われています。

SSR（Server Side Rendering）

SSRはServer Side Rendering（サーバーサイドレンダリング）の頭文字からきています。
こちらも読んで字の如く、ユーザーからリクエストがあると、「サーバー側で」画面を構築してユーザーに返します。
CSRとの大きな違いは、レンダリングする場所がユーザー側ではなくサーバー側であることです。
ユーザーがリクエストを送る度にサーバーと通信し、最新の状態をユーザーに返すことができます。
Next.jsはデフォルトだとSSRをサポートしています。（ただし特定の状況ではSSGを推奨しています。）
###　 SSRのメリットとデメリット

メリット	デメリット
常に最新の状態を保持できる	毎回サーバーにリクエストを送るので、サーバー負荷が高い
クライアント環境に依存せずに安定している	初回ロードが短い

SSRはサーバー側で働くので、クライアントのパソコンの性能やネット環境への依存が最小限です。また、サーバー側は一般的なPCに比べて高性能なので、安定したサービス供給が可能となります。
一方、サーバーとの通信回数が多くなるため、サーバーへの負荷が高くなるのと、毎回サーバーと通信するので、ページ遷移がCSRに比べて遅くなります。キャッシング等の技術でその遅延を最小限に抑えることは可能ですが、その分開発コストがかかります。
SEO対策でCSRより優れていますが、その強みも近年では色褪せてきています。

SSG（Static Site Generation）

SSGはStatic Site Generation（スタティックサイトジェネレーション）の頭文字からきています。
こちらは読んで字の如くとは言えませんね。。。
CSR、SSRに比べて少し難解です。
CSRはクライアントのリクエスト時に、クライアント側でレンダリングし、
SSRはクライアントのリクエスト時に、サーバー側でレンダリングしました。
SSGはクライアントのリクエスト時ではなく、「ビルド時に」画面を構築します。
なのでリクエストの有無に関わらず、サイトはビルド時に静的ページのリソースを全て保持します。
そしてクライアントからリクエストがあったとき、そのリクエストに応じて「予め用意しておいたページ」をクライアントに返します。

SSGのメリットとデメリット

メリット	デメリット
リソースをすでに保持しているため高速である	ビルド時に時間がかかる
サーバーとの通信が基本的に1度のみ	データが最新でない可能性がある

SSGは一番負荷のかかる処理の部分をビルド時に行っているので、クライアント側のパソコンの性能や、ネット環境に左右されずに安定したサービス供給が可能であり、ビルド時にすべてのリソースを保持しているので、CSRのように高速です。
またサーバーとの通信が基本的にビルド時のみなので、サーバーへの負荷が最小限となります。
一方、データが膨大である場合ビルドに時間がかかってしまうこと、データがビルド時で固まるので、最新ではない可能性があるというデメリットも存在します。
実はSSGは有能で、セキュリティ上のリスクが低いことや、サーバーダウンの影響を受けづらいというメリットがあります。
ただ、リアルタイム更新は苦手で、それを解消するには高度な技術と知識が必要となります。

ISR（Incremental Static Regeneration）

最後にISRを紹介しておきます。
ISRはIncremental Static Regeneration（インクリメンタルスタティックリジェネレーション）の頭文字からきています。
簡潔に説明すると、SSGとSSRの良いとこ取りです。
ページのレンダリングはビルド時に行います。（SSG）
指定したタイミングでサーバーから最新データを取得してきます。（SSR）

ISRのメリットとデメリット

メリット	デメリット
SSGとSSRの良いとこ取り	構築難易度が高め
サーバーへの負荷が最小限	サポートしているのサーバーがVercelのみ

ISRの良さは何と言ってもSSGとSSRの良いところを持っているという点に尽きます。
ただ、ビルド時間が長いのと、Vercelを使わない開発では使用できないというデメリットがあります。

まとめ

CSR、SSR、SSG、そしてISRを紹介してきました。
これらの特性の理解ももちろん大切ですが、用途に合わせて使い分けられるようになるのが理想です！
わかって満足しないことが大事ですね。
一緒に頑張っていきましょう！