静的サイトとサーバーレンダリングの使い分け——ページごとに3つの質問で決める

静的サイトにするか、サーバーレンダリングにするかは、サイト全体で1つに決めるのではなく、ページごとに3つの質問で決めるのがいちばん迷いが少ない、というのが私の結論です。3つとは「誰が見ても同じ内容か」「更新をどのくらいの速さで反映したいか」「アクセスした人の情報（ログイン状態など）が要るか」です。

歴史③では、ページを「いつ・どこで組み立てるか」を選べるようになった流れを書きました。今回はその続きとして、実際の案件でどう選ぶかに絞ります。

言葉をそろえる：プリレンダリングとダイナミックレンダリング

まず用語です。打ち合わせで「SSR」「SSG」と略語が飛び交うと、人によって指しているものがずれることがありました。

Next.jsの用語集では、ビルド時（または再検証のタイミング）にページを作っておくことをPrerendering（プリレンダリング）、リクエストのたびに作ることをDynamic rendering（ダイナミックレンダリング）と呼んでいます。そして、cookies() や headers() のような「リクエストごとの情報を読むAPI」を使わないコンポーネントは、プリレンダリングが既定になると説明されています。

つまり「何もしなければ静的寄りになり、リクエストの情報を読んだところから動的になる」という構造です。私はクライアントに説明するとき、「先に印刷しておくページ」と「来た人に合わせてその場で書くページ」と言い換えています。

ページごとに聞く3つの質問

案件の初期に、ページの種類を一覧にして次の3つを聞いていきます。

質問	「はい」なら	例
誰が見ても同じ内容か	プリレンダリング候補	会社概要・サービス紹介・記事
更新を数分〜1時間ほど遅れて反映してもよいか	再検証付きのプリレンダリング候補	お知らせ一覧・商品一覧
アクセスした人の情報（ログイン・Cookie）が要るか	ダイナミックレンダリング	会員ページ・管理画面

2つ目の「遅れて反映してもよい」が、静的と動的の間を埋める選択肢です。Next.jsではこれをIncremental Static Regeneration（ISR）と呼び、公式ガイドでは、サイト全体を作り直さずに静的なページを更新でき、多くのリクエストにはプリレンダリング済みのページを返すことでサーバー負荷を抑えられる、と説明されています。たとえば revalidate = 60 と書くと、作り直しは多くても60秒に1回まで、という指定になります。

ここで大事なのは、数字を決めるのはエンジニアではなく、更新する人の運用だという点です。「お知らせを出したら何分以内に見えてほしいか」は、ディレクターがクライアントに聞くべき質問だと私は考えています。

このポートフォリオでの分け方

実例として、このサイトの構成を書いておきます。

• 記事ページ：誰が見ても同じなので、ビルド時に全記事を作っています。generateStaticParams でMarkdownファイルの一覧を返し、記事を1本追加するたびに再ビルドとデプロイをする運用です。1日1本程度の更新なので、ビルド待ちは気になっていません。
• 非公開の実績ページ：パスワードで保護しているため、アクセスのたびにCookieでログイン状態を確認しています。ただ、確認はページの手前の処理（Next.js 16でいうProxy）で行い、ページの中身自体は誰が見ても同じなので、作り方は静的のままにしています。

「リクエストの情報が要る部分」と「内容が人によって変わる部分」は分けて考えられる。同じNext.jsの中でも、どこを動的にするかはページの中の役割ごとに選べる、というのが「サイト全体で1つに決めない」という意味です。

逆に、すべてを静的ファイルとして書き出す方法もあります。Next.jsのStatic Exportsのガイドでは、output: 'export' を指定するとHTML/CSS/JSを出力し、静的ファイルを配信できるサーバーならどこでも置けると説明されています。ただし同じガイドで、Cookieやリダイレクト、generateStaticParams のない動的ルートなどはサポートされない機能として挙げられています。レンタルサーバーに置きたい案件では、最初にこの一覧を見て、要件と衝突しないかを確認するようにしています。

迷ったときは「静的から始める」

判断がつかないときは、静的から始めることが多いです。静的なページは配るだけなので壊れにくく、表示も速くしやすい。あとから一部のページだけ動的にするのは、全体を静的に作り直すより手戻りが小さいと感じています。

一方で、最初から会員機能や在庫表示が要件に入っているなら、無理に静的へ寄せないほうがよいと考えています。キャッシュの仕組みを後付けで重ねると、「なぜこのページだけ古いのか」を説明できる人がいなくなりがちだからです。

明日から試せる一手

担当しているサイトのページを5〜6種類書き出し、表の3つの質問に「はい／いいえ」で答えてみてください。2つ目の質問だけは、エンジニアではなく更新担当の方に「公開してから何分以内に見えてほしいですか」と聞きます。その答えが、静的・再検証・動的のどれを選ぶかの根拠になり、構成の説明もしやすくなります。