【フロント基礎】SSR・CSR・SSG・ISR、結局どう使い分ける？ 答えは「データ単位」

Webサイトを作るとき、「どうやって表示させるか」はすごく大事なポイントですよね。最近よく聞く「SSR」「CSR」「SSG」「ISR」といった言葉。なんとなく、「サーバーで絵を描くのがSSR」「スマホ（ブラウザ）で描くのがCSR」「あらかじめ絵を描いておくのがSSG」みたいなイメージはあるかもしれません。でも、いざ自分で画面を作るとなったとき、どれを選べばいいのか迷ってしまう…そんな経験、ありませんか？

これらの技術は、Webサイトがユーザーの画面に表示されるまでの「描画」を、どこで行うか、いつ行うか、という違いで分けられています。それぞれに得意なこと、苦手なことがあるので、サイトの目的や表示したい「データ」の種類によって使い分けるのが、賢いやり方なんですね。

例えば、常に最新の情報を見せたいニュースサイトや、ログイン後のユーザーごとに内容が変わるマイページなんかは、サーバー側で毎回最新の情報を描画して届ける「SSR（サーバーサイドレンダリング）」が向いています。ユーザーが「表示して！」とお願いするたびに、サーバーが最新のデータを持ってきて、完成した画面を返すイメージです。

一方、一度表示してしまえば、その後はユーザーのスマホやパソコン（ブラウザ）だけでサクサク動いてほしい、例えばSNSのタイムラインや、複雑な操作が必要なWebアプリなどは、「CSR（クライアントサイドレンダリング）」が得意とするところです。最初は簡単な画面だけを送り、あとはブラウザが自分でデータを取ってきて、画面を更新していくイメージ。ユーザー体験としては快適になることが多いです。

「SSG（スタティックサイトジェネレーション）」は、あらかじめ「絵」を描いておく、つまりHTMLファイルを事前に作っておく方法です。ブログのトップページや、あまり更新されない企業の紹介ページなど、内容が頻繁に変わらないページにぴったり。表示がすごく速いのがメリットで、ユーザーにとっても「速い！」と感じてもらいやすいのが特徴です。

そして、最近注目されているのが「ISR（インクリメンタル・スタティック・リジェネレーション）」です。これはSSGの進化版とも言えます。基本はSSGのように事前に作っておいたページを表示しつつ、一定時間ごとに「裏で」ページを更新していくんです。だから、更新頻度は高くないけれど、完全に古いままでも困る、というようなサイト（例えば、商品の在庫情報や、たまに更新されるブログ記事など）に最適。静的なサイトの速さと、動的なサイトの鮮度を両立できる、いいとこ取りな技術と言えるでしょう。

結局のところ、どの技術を選ぶかは、「どんなデータを」「いつ」「どう見せたいか」という、サイトの「データ単位」で考えるのが一番分かりやすい、ということなんですね。それぞれの技術の特性を理解して、Webサイトをより速く、より快適にするための道具として使いこなしていきましょう。