Nextjs16~：

• 非同期処理ではないSSR部分がSSGのようにすぐに表示され、その後非同期処理が終わった箇所が表示される。

• SSGのページは以前はheaders/cookiesに内部的にアクセスする非同期処理コンポーネントがあると全体がSSRになったが、両立が可能になった。

• Cache Componentsは関数の結果をサーバーにキャッシュしてレスポンスを短縮することで表示を早くするような使い方をする。

next.config.ts で以下の行を追加しないとPPR / Cache Componentsを使えない

const nextConfig: NextConfig = {
  cacheComponents: true,
};

PPR

サーバーコンポーネントの非同期処理部分を <Suspense>で囲うことで後から表示させる。

非同期処理を行っている Page.tsxをPPRにする例：

1. 非同期処理を行う箇所（例：await prisma.posts.findmany）を<PostsContainer />のようなコンポーネントにわける

2. Page.tsxからasyncを外す

3. 切り分けた非同期コンポーネントをimportし <Suspense>で囲う

ビルド時に該当ルートが PPR と表示されている。

Cache Components

上記で切り分けたような非同期処理を行うコンポーネントに"use cache"を追加するとキャッシュされたデータが表示されるのでSSGのように表示が高速になる。Cache Componentsはデータを取得する関数の中でも使うことが出来る。

• Cache Componentsは <Suspense>で囲う必要はない

ローカルで確認する：

export const getSlowData = async () => {
  "use cache";
  await new Promise((resolve) => setTimeout(resolve, 5000));
  return "hello";
};

• page側でこの関数をimportし実行するとリロードしてもすぐに表示される。

再検証：

• 非同期コンポーネントの"use cache" と書いた行の下にcacheTag(タグ名)を書き、serverAction側でupdateTag(タグ名) を書くとデータが更新（ = キャッシュが破棄）される。

  • revalidatePath("/") のようにしていた部分を置き換える。

  • revalidatePath("/")はページ全体の再レンダリングなので updateTag()のほうが負荷が小さい。