サーバーサイドレンダリングとTTFB — SSRパフォーマンスガイド

レンダリング戦略とWeb Vitals

レンダリング戦略の選択 — CSR、SSR、SSG、ISR — はTTFB、FCP、LCP、INPに大きな影響を与えます。

レンダリング戦略の比較

戦略	TTFB	FCP	LCP	INP	CLS
CSR	高速	遅い	遅い	リスク	低
SSR	遅い	高速	高速	リスク	低
SSG	高速	高速	高速	低	低
ISR	高速*	高速	高速	低	低

クライアントサイドレンダリング（CSR）

最小限のHTMLシェルを送信し、すべてをJavaScriptでレンダリング。TTFB高速、FCP/LCP遅い。

サーバーサイドレンダリング（SSR）

リクエストごとに完全なHTMLを生成。TTFB遅いが、FCP/LCP高速。

ストリーミングSSR：

// React Server ComponentsでTTFBを削減
import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header /> {/* 即座にレンダリング */}
      <Suspense fallback={<Skeleton />}>
        <SlowContent /> {/* 準備ができたらストリーム */}
      </Suspense>
    </>
  );
}

静的サイト生成（SSG）

ビルド時にページを事前レンダリング。TTFB最速。

Incremental Static Regeneration（ISR）

SSGとオンデマンド再検証を組み合わせ。最初の訪問はキャッシュされた静的ページを配信。