はじめに
備忘録として作成
以下の教材の5章 「SSGでMicroCMS一覧ページを作ろう」を理解するためにまとめました
【初心者完全版】0からNext.js開発して2時間で基礎をマスターする最強チュートリアル【図解解説】
Cache Componentsが何を解決するか？
① 従来はページ単位でしかレンダリング手法を決められなかった
ページ全体がSSG or ページ全体がSSR
② 動的コンテンツが1つでもあるとページ全体がSSRになっていた
<h1>トップページ</h1> ← 静的
<QiitaArticles /> ← 動的（API取得）
→ 動的が1つあるだけでページ全体がSSRになる
→ h1タグまで毎回サーバーで処理される
③ だから初期描画が遅かった
SSR = アクセスのたびにサーバーで全部処理
→ キャッシュが効かない
→ 遅い
④ cacheComponents: true（PPR）で解決
<h1>トップページ</h1> ← 静的 → ビルド時に生成（速い）
<Suspense>
<QiitaArticles /> ← 動的 → アクセス時に取得
</Suspense>
→ 静的部分だけ先にSSGで返せる
→ 初期描画が速くなる
全体の流れ
SSG使うには'use cache'を書かなければならない
↓
'use cache'使うにはcacheComponents: true を設定しなければならない
↓
cacheComponents: true を設定した場合、PPRが有効になる
↓
PPRが有効になったら、全ての箇所で動的な部分は<Suspense>で囲む必要がある
具体的なコード
SSG使うには'use cache'を書かなければならない
app/blogs/page.tsx
'use cache';
export default async function Blogs() {
...
}
'use cache'使うにはcacheComponents: true を設定しなければならない
tech-blog/next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
cacheComponents: true,
};
export default nextConfig;
cacheComponents: true を設定した場合、PPRが有効になる
PPR（Partial Prerendering）とは、1つのページの中で静的部分と動的部分を混在させる仕組みです。
| 部分 | タイミング |
|---|---|
| 静的部分（h1タグなど） | ビルド時に生成 |
| 動的部分（APIデータなど） | アクセス時に取得 |
cacheComponents: true を設定するとこのPPRが自動的に有効になります。
PPRが有効になったら、全ての箇所で動的な部分は<Suspense>で囲む必要がある
データ取得、動的ルーティングなどが対象
tech-blog/src/app/blogs/[id]/page.tsx
import { Suspense } from "react";
async function BlogContent({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params; // 動的なデータ
return (
<div>
<h1>BlogDetailページ</h1>
<p>ID: {id}</p>
</div>
);
}
export default function BlogDetail({ params }: { params: Promise<{ id: string }> }) {
return (
<Suspense fallback={<div>Loading...</div>}>
<BlogContent params={params} /> {/* Suspenseで囲む */}
</Suspense>
);
}