結論：アプリ構造とレンダリング方式は別概念

Next.jsでは「ページ遷移の方法（SPA/MPA）」と「HTMLを生成するタイミング（SSG/SSR/CSR）」は独立した概念。

両者を正しく理解することで、最適な構成を選択できる。

アプリケーション構造（ページ遷移の方法）

構造ルーティングページ遷移
SPAクライアントサイドJavaScriptで画面切り替え（リロードなし）
MPAサーバーサイドフルページリロード

Next.jsはデフォルトでSPA（クライアントサイドルーティング）。

レンダリング方式（いつ・どこでHTMLを生成するか）

1. SSG（Static Site Generation）- ビルド時に生成

Pure SSG（完全静的）:

Static Export（output: 'export'）

  • サーバー不要（Netlify、GitHub Pagesにデプロイ可能）
  • 完全静的ファイルのみ生成
// next.config.js
module.exports = {
  output: 'export',
}

Standard SSG

  • Node.jsサーバー使用
  • API Routes、画像最適化、middleware、rewrites、redirects などを併用

2. ISR（Incremental Static Regeneration）

SSG + 更新機能

export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }]
}

export const revalidate = 60 // 60秒ごとに再生成

3. SSR（Server-Side Rendering）- リクエスト時にサーバーで生成

// App Router
export const dynamic = 'force-dynamic'

export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'no-store'
  })
  return <div>{data}</div>
}

4. CSR（Client-Side Rendering）- ブラウザで生成

'use client'

import { useEffect, useState } from 'react'

export default function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/data').then(res => setData(res))
  }, [])

  return <div>{data}</div>
}

5. PPR（Partial Prerendering）- 部分的にプリレンダリング

静的部分と動的部分を組み合わせ

import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      <StaticHeader />
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>
    </>
  )
}

レンダリング方式の比較

方式生成タイミングメリットデメリット
Static Exportビルド時サーバー不要、超高速動的機能使えない
Standard SSGビルド時高速、SEO良好ビルド時間増加
ISRビルド時+定期更新SSGの速度+最新データ複雑
SSRリクエスト時常に最新データサーバー負荷高
CSRクライアントインタラクティブ初期表示遅い、SEO弱い
PPR静的+動的速度と最新性の両立Next.js 14+ 必要

使い分けの目安

Static Export（サーバーレス）

  • ブログ、ドキュメントサイト
  • GitHub Pages、Netlify

Standard SSG

  • コーポレートサイト
  • API Routes、画像最適化が必要

ISR

  • ニュースサイト、ECサイト
  • 定期的な更新が必要

SSR

  • ダッシュボード、管理画面
  • リアルタイムデータ表示

CSR

  • ログイン後の画面
  • インタラクティブなUI

PPR

  • 最新のハイブリッド構成
  • ヘッダー静的+コンテンツ動的

まとめ

  • SPA/MPAはページ遷移の方法
  • SSG/SSR/CSR/PPRはHTMLを生成するタイミングと場所
  • Next.jsはSPA構造 + 各種レンダリング方式を組み合わせ可能
  • output: 'export'でサーバーレスな完全静的サイトも作れる