🐬

CSR, SSR, SSG, ISRの違い・流れを大まかに理解する

2021/04/19に公開

Next.jsが流行っているのにSSGとかISRのキャッチアップができておらず、しなきゃなーと思って記事を探していたところ、信じられないくらいわかりやすい記事を見つけてしまいました。

ただ分量が多いので、大まかな違い・流れをつかめるよう要点だけ絞って書き残します。
あとで自分が何回も見返すためのものですが、誰かの参考になればと。

1. CSR(Client Server Rendering)
2. SSR(Server Side Rendering)
3. SSG(Static Site Generation)
4. ISR(Incremental Static Regeneration)

リクエストきたら、レスポンス受け取ってブラウザ上でレンダリングする
JSファイルがデカくなると送信する/処理するのに時間がかかる
=> レンダリング遅れる

リクエストきたら、サーバ上でレンダリングしてレスポンス（HTML）を返す
レンダリングをサーバ上で行えば、デカいJSを送信せずにすむ
=> CSRより早いよね

ただどっちも、リクエストきてからレンダリングするのには変わりない
レンダリングする場所が違うだけ

リクエストが来る前にレンダリングしておこう
リクエストが来たらレンダリング済みのHTMLを返せばいい
レンダリングはビルド時にしよう
APIからのデータ取得みたいな通信もビルド時にするよ！

いや、そしたらビルドした後にデータ変わったらどうするの
ビルド時にしかデータ取得しないんだからその後に更新されたデータ取得できないじゃん
次のビルドまでデータ取得待つの？じゃあ次のビルドはいつ？

リクエストから一定時間経って別のリクエストがきたら、データを再取得し再レンダリングする
それまではキャッシュ（HTML）を返す
一定時間内にリクエストが来た場合もキャッシュを返す

じゃあその「一定時間」ってのが60秒なら、60秒以内に送られてきたリクエストにはキャッシュが返されるの？それって最新のデータを反映されてなくない？

=> はい

「プロフィール編集してすぐ画面更新」のような、更新した（最新の）情報がすぐ表示されないといけない場面ではISRは適さない

CSR -> ブラウザ上でレンダリング
SSR -> サーバ上でレンダリング
SSG -> ビルド時にレンダリング
ISR -> SSGでビルド時以外のときもレンダリング（SSR）