Next.js レンダリング方法 パフォーマンス比較

SSR、SSG、CSR、PPR風の各レンダリング方法のパフォーマンスを比較します。

Web Vitals (FCP, TTFB) を測定します

レンダリング方法について

SSR

サーバーサイドでHTMLを生成してクライアントに送信

SSG

ビルド時にHTMLを事前生成してキャッシュ

CSR

クライアントサイドでJavaScriptを使用してレンダリング

PPR風

StreamingとSuspenseを使った段階的なレンダリング