Nextjs ~15：

静的に生成したい（ = SSG ）ページの中に１つでも非同期処理を行う箇所があると、SSGには出来ずページ全体がSSRになる。

Nextjs16~：

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

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

const nextConfig: NextConfig = {
  /* config options here */
  cacheComponents: true,
};

PPR

静的に生成できる所は瞬時に表示され、非同期処理のSSR部分は <Suspense>で囲うことで後から表示される

手順：

Page.tsxに書いているデータ取得等の非同期処理を行う箇所（例：prisma.posts.findmany）を PostsContainerのようにコンポーネントにわける
Page.tsxからasyncを外す
切り分けた非同期コンポーネント（例：<PostContainer />）をimportし、<Suspense>で囲う

これで動的コンポーネント部分は動的に、静的部分は静的に（＝ PPR）になる。ビルド時にページが PPR と表示されている

Cache Components

上記で作成した（切り分けた）非同期処理を行うコンポーネントの下部に"use cache"を追加するとSSGのようにキャッシュされたデータが表示される。Cache Componentsは <Suspense>で囲う必要はない

再検証：

非同期コンポーネントの"use cache" と書いた行の下にcacheTag(タグ名)を書き、serverActionでrevalidatePath("/") のようにしていた部分をupdateTag(タグ名) のように変更することでデータを更新する。

エラー

PPR / Cache Componentsに関連したエラーは以下の内容しか見たことがない

Route "/[locale]" used new Date() before accessing either uncached data (e.g. fetch()) or Request data (e.g. cookies(), headers(), connection(), and searchParams).

非同期関数の順番

const Container = async () => {

  const memos = await prisma.data.findMany({
    orderBy: { created_at: "desc" },

  const session = await getSession();
  });

上記が原因となったコンポーネントだが、親側では <Suspense> で囲っているので PPR の条件を満たしているはず。

解決：

getSession()をPrismaからのデータ取得より上部に置くだけでエラー表示が無くなった

原因：

Prismaからのデータ取得が上部にあるとNextjsがCache可能と判断するが、その下にCacheできないSession関数が下にあるので、判断がおかしくなりエラーになっていたと思われる。
CacheすることができないSession取得関数を上部に置くことで、Cache ComponentsではなくPPRであることを認識させられる。

SSGのページ

export const generateStaticParams = async () => {
  const tags = await prisma.data.findMany();
  return tags.map((tag) => ({ slug: tag }));
};

const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
  const { slug } = await params;

解決：

use cacheを追加

const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
  "use cache";
  const { slug } = await params;

generateMetadataも同じエラーが出るが、対策は同じ

// METADATA
export async function generateMetadata({ params }: { params: Props }) {
  "use cache"; // 追加
  const { slug } = await params;
  const post = await prisma.data.findUnique({
    where: {
      slug: slug,
    },
  });

use cache を追加

Nextjs16~：PPR / Cache Components