AIに頼めば、Webサイトやアプリはずいぶん手軽に作れるようになりました。ただ、いざ作り始めると、SPA・SSR・SSG・ISRといった言葉が出てきて、どれで作ればいいのか分からず手が止まることがあります。AIは指示すれば何かしら作ってくれますが、この「ページの作り方」を目的に合わせて選べないと、あとから遅い・コストがかかる・検索で拾われにくい、といった形で跳ね返ってくることがあります。
この記事では、まず4つを2つの軸で整理し、それぞれの向き・トレードオフ、SEOとの関係、そして目的から選ぶ考え方までまとめます。
SSG・ISR・SSRは「HTMLを作るタイミング」、SPAは「画面の更新方法」
Webページは、最終的にHTMLとして表示されます。まず、SSG・ISR・SSRは、その最初に見せるHTMLを、いつ用意するかの違いです。
- SSG(Static Site Generation):公開前(ビルド時)に、あらかじめHTMLを作っておく。
- ISR(Incremental Static Regeneration):基本はビルド時に作りつつ、更新のきっかけで、必要なページだけ作り直す。
- SSR(Server-Side Rendering):利用者がアクセスしたとき、サーバー側でその都度HTMLを作る。
SPAだけは、少し別の軸の話です。SPA(Single Page Application)は、ページを移動するたびにHTML文書を丸ごと読み直すのではなく、1つの文書をブラウザ側のJavaScriptで書き換えていくアプリの構造を指します。じつは、SPAの最初のHTMLをSSGやSSRで用意することもできるので、SPAとSSG/SSRは対立するものではありません。まずは「HTMLを作るタイミング(SSG・ISR・SSR)」と「画面の更新方法(SPA)」は別の話、と押さえると混乱しません。
SSG：内容が中心で、更新が少ないページ
SSGは、公開前にHTMLを作り置きします。アクセス時には出来上がったHTMLを返すだけなので、表示がとても速く、配信も安定します。
向くのは、ブログ記事・LP・会社紹介など、内容が中心で頻繁には変わらないページです。このオウンドメディアの記事も、SSGが基本になります。
トレードオフは、ページ数が膨大になると、公開前に全部作るぶんビルド(生成)に時間やコストがかかること。また、作り置きなので、内容を変えたら作り直すまで反映されません。
ISR：更新はあるが、常に最新でなくてもいいページ
ISRは、SSGの「速い」を保ちつつ、一定時間が過ぎた後のアクセスや、データの更新をきっかけに、必要なページだけを作り直す方式です。古いページを返しながら、裏で新しく作り直しておく、といった動きもできます。
向くのは、ニュースや商品ページのように、更新はあるけれど、秒単位で最新である必要はないもの。「基本は作り置きで速く、でも新しくもしたい」を両立できます。SSGの速さと、次に触れるSSRの最新性の、ちょうど中間だと考えてください。
SSR：アクセス時点のデータを反映したいページ
SSRは、利用者がアクセスしたとき、サーバー側のプログラムでHTMLを作って返します。アクセスした時点のデータを反映したHTMLを返せます。
向くのは、在庫や価格、ログイン後の個人向け表示など、その時点の情報をHTMLに反映したいページです。ただし、SSRが返すのは「その瞬間にサーバーが持っていた情報」で、表示されたあともずっと自動で更新され続けるわけではありません(最新の在庫数だけはブラウザから別途取りにいく、といった組み合わせもよく使われます)。トレードオフは、リクエストのたびに作るぶんサーバーに負荷がかかること。ただし、キャッシュを使えば毎回必ず作るとは限りません。
SPA：操作が中心のツールやアプリ
SPAは、ページを移動しても文書を丸ごと読み直さず、ブラウザ側で必要な部分だけを書き換えます。ページ全体を読み込み直さないので、操作がなめらかです。
向くのは、管理画面、チャット、社内ツールなど、閲覧よりも操作が中心のもの。なお、前述のとおり、SPAでも最初のHTMLをSSGやSSRで用意できます。ただ、最初のHTMLに本文がほとんど入っていない構成にすると、検索エンジン向けに注意が要ります(次で触れます)。
見落としやすい「SEOとの関係」
作る前に知っておきたいのが、SEO(検索での見え方)との関係です。検索エンジンは、ページのHTMLを読んで内容を理解します。
GoogleはJavaScriptを実行し、その結果生成された内容も読み取れます。そのため、SPAだから検索に表示されない、というわけではありません。
ただし、最初のHTMLに本文が入っていない構成では、検索エンジンがJavaScriptの実行を待つ必要があり、クロールやインデックスが不安定になることがあります。JavaScriptを十分に処理しない検索エンジンもあります。だから、検索流入が重要な記事・LP・商品ページでは、SSG・ISR・SSRのように、最初から内容を含むHTMLを返す構成のほうが、内容を確実に渡せて安心です。「見せたい相手は、検索から来る人か、ログイン後に操作する人か」でも、選ぶ方式が変わってきます。
目的から選ぶ──第一候補の絞り方
どれか1つに決めるものではなく、第一候補を絞るための目安として使ってください。
- 検索から読まれる公開ページ(記事・LP・商品)か。そうなら、最初から内容を含むHTMLを返せる SSG・ISR・SSR を優先します。
- アクセスごとに内容が大きく変わるなら SSR が候補。
- 少し古くても問題ないなら ISR が候補。
- ほとんど更新しないなら SSG が候補。
- ログイン後の操作が中心のページか。そうなら SPA を中心にしつつ、必要なら最初の表示だけ SSR や SSG で用意します。
そして、サイト全体を1つに決める必要はありません。Next.jsのようなフレームワークでは、ページや部分ごとにこれらを組み合わせやすくなっています。サーバー側で動く仕組みについては、「サーバーとは」の記事でも解説しています。
AIで作るときこそ、判断軸を持つ
AIに「Webサイトを作って」と頼むと、何かしらの方式で作ってくれます。ですが、要件を細かく伝えなければ、目的に最適な方式を選んでくれるとは限りません。記事サイトを、最初のHTMLに本文が入らない構成で作ってしまい、あとから検索で拾われにくいと気づく、といったずれも起こり得ます。
だからこそ、作る前に「このページは内容中心か操作中心か」「最新性はどこまで要るか」を人が決めて、AIに伝えることが大事です。AIと対話しながら開発する進め方については、「バイブコーディングとは」でも紹介しています。方式に優劣はなく、要件によって向き不向きがあるだけ。流行りではなく、目的から選べるようにしておきましょう。
まとめ
- SSG・ISR・SSRは「最初に見せるHTMLをいつ作るか」の違い。SSG=公開前に作り置き、ISR=更新のきっかけで作り直し、SSR=アクセス時点のデータで生成。SPAはこれとは別軸で、「ページ遷移でHTMLを読み直さず、ブラウザで画面を書き換える」構造。
- 向きの目安:記事・LPはSSG、ニュース・商品はISR、アクセス時点の情報を反映したいならSSR、操作中心の管理画面・ツールはSPA。組み合わせも普通。
- GoogleはJavaScriptも読むのでSPA=検索に出ない、ではない。ただし最初から内容を含むHTMLを返すSSG/ISR/SSRのほうが、検索に内容を確実に渡せる。
- サイト全体で1つに決めず、ページごとに組み合わせられる(Next.jsなど)。
- AIで作れる時代でも、方式は要件で選ぶ。目的をAIに伝えられるよう、判断軸を持っておく。
