🐬

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

1 min read

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

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

本当にわかりやすいので、詳しく知りたい方はこちら見たほうがいいです。

https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed


今日書くもの

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


CSR(Client Server Rendering)

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

SSR(Server Side Rendering)

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


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


SSG(Static Site Generation)

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


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


ISR(Incremental Static Regeneration)

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


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


=> はい

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

まとめ

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

参考元

最後にもう一度

https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed

Discussion

ログインするとコメントできます