【比喩】回転寿司でSSGとSSRを例えたらわかりやすかった【Next.js】

はじめに

突然ですが、みなさんはお寿司は好きですか？私は大好きです。

SSRとSSGの特徴や違いが全然理解できない…と悩んでるときに、気分転換で食べに行った回転寿司で思いついた解釈が結構わかりやすいと感じたのでご紹介します！

回転寿司の世界へようこそ

まずは、こちらの図をご覧ください。

捕捉: お寿司は、静的に生成されたHTMLファイルとして考えてください。

SSG：レーンをぐるぐる回るお寿司

左側がSSGです。見てください、あのレーンをぐるぐる回ってるお寿司！これがSSGの特徴です。

• 特徴：お寿司（コンテンツ）があらかじめ作られてレーンを回ってる
• メリット：お客さん（ユーザー）がすぐにパクッと食べられる（表示が超速い！）
• 技術的な話：ビルド時にページを作っちゃうので、アクセスがあった時にすぐ出せるんです

つまり、SSGは「席に着いたら、いつでも食べ始めてね！」って感じなんですね。

SSR：注文を受けてから作るお寿司

右側がSSRです。ここではお客さんが注文してから作り始めます。

• 特徴：タッチパネル（ブラウザ）で注文すると、厨房（サーバー）で作って運んでくる
• メリット：新鮮で、お客さんの好みにぴったりのお寿司が食べられる（動的なコンテンツ）
• 技術的な話：リクエストがあった時にサーバーでページを作るので、最新のネタを使えるんです

SSRは「お客様の好みに合わせて、新鮮なお寿司を今すぐに作ります！」っていう感じですね。

カスタム注文だってお手の物

SSRのいいところは、お客さんの好みに合わせられること。たとえば：

• Aさん：「わさび抜きで！」
• Bさん：「シャリ少なめで！」

こんな注文にも対応できちゃうんです。技術的に言うと、ユーザーごとにカスタマイズしたコンテンツが出せるってことなんですよ。（動的なコンテンツ）

ISR：新鮮さキープの秘技

ところで、SSGのお寿司、ずっと同じのをぐるぐる回してたら古くなっちゃいますよね。そこで登場するのがISR（Incremental Static Regeneration）！

• やってること：定期的に新しいお寿司を作って古いのと入れ替えてる
• 技術的な話：一定時間ごと、または何かのきっかけで静的ページを更新するんです

つまり、「鮮度も大事！でも効率も大事！」っていう、いいとこ取りの技なんです。

SEO対策の視点からも見てみよう

SEO対策って大事ですよね。検索エンジンくんの食レポで例えてみましょう：

SSGのSEO的メリット

• お店のいちばん目立つところでぐるぐる回ってる
• 検索エンジンくんが「おっ、美味しそう！」ってすぐに見つけられる

検索エンジンくんが食べたいと思ったお寿司を見つけたら飛びついてすぐに食べ始められる！
技術的に言うと、検索エンジンがユーザーの求める情報を素早く探してこれるから、待ち時間がないということ

SSRのSEO的メリット

• 検索エンジンくんが「まぐろ軍艦！ネギなし！わざびはトッピングで！」って細かく注文できる
• 「今日のオススメ」みたいな最新情報も厨房（サーバー）がバッチリ提供してくれる

つまり、厨房は検索エンジンくんが求めた通りのお寿司をその場で作って提供してくれるので、欲しいお寿司をすぐに食べられる！
技術的に言うと、検索エンジンがユーザーの求める情報にたどり着きやすいということ

まとめ

いかがでしたか？回転寿司を使って説明すると、SSGとSSRの特徴と違いがスッキリと理解できました。

• SSG：準備オッケー、超速いけど、ちょっと融通が利かない
• SSR：注文を受けてから作るので融通が利くけど、ちょっと時間がかかる

どっちがいいかは、お店（プロジェクト）と作るサイトやアプリのコンテンツ状況次第。うまく使い分けるのがコツです。

公式ドキュメントや、教材の説明も聞いてもいまいちピンと来ないときは、身近にあるもので例えてみると閃きがあるかもしれませんね！