Next.jsレンダリングとアプリ構成の整理
結論：アプリ構造とレンダリング方式は別概念 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）- 部分的にプリレンダリング 静的部分と動的部分を組み合わせ ...