フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または yarn create next-app <アプリ名> または bun create next-app <アプリ名> )

Next.js app router の SSR の Data cache Revalidation について

● Next.js app router の SSR の Data cache Revalidation について

https://nextjs.org/docs/app/building-your-application/caching#revalidating-1

1. Time-based Revalidation

一定時間が経過し、新しいリクエストが行われた後にデータを再検証する。 これは、変更頻度が低く、鮮度がそれほど重要でないデータに有効である。
時間間隔でデータを再検証するには、fetchのnext.revalidateオプションを使用して、リソースのキャッシュ寿命(秒)を設定します。

2. On-demand Revalidation

イベント(フォーム送信など)に基づいてデータを再検証します。 オンデマンド再検証では、タグベースまたはパスベースのアプローチを使用して、データのグループを一度に再検証できます。 これは、最新のデータをできるだけ早く表示したい場合に便利です(ヘッドレスCMSのコンテンツが更新された場合など)。
// 時間ベースの再検証 ( Time-based )
fetch(url, { next: { revalidate: 3600 } }) // 1時間

// CMS更新時 ( On-demand )
async function handleCMSWebhook() {
 await fetch('/api/revalidate?tag=article')
}
No.2582
01/24 12:18

edit