1. ‣
2. Next.js App Router Complete Guide Data Fetching編
3. Next.js App Router Complete Guide Functions編

fetch API編

• App Router では Web API に標準搭載されているfetch APIを拡張して、キャッシュやRevalidate機能を搭載している。

force cache

• defaultの設定。ビルド時やリクエスト時に1度だけ取得をする。その後は、キャッシュを用いるためデータは更新されない。
• 以前のSSGと同じ感じ

- // 'force-cache' is the default, and can be omitted
- fetch('https://...', { cache: 'force-cache' })

revalidate cache

• 時間経過や条件によって再度データを取得する。Time-based RevalidationとOn-demand Revalidationが存在する
• 以前のISRと同じ

1. Time-based Revalidation fetchの引数に秒数で指定する。今回は、3600秒なので1時間はデータを再取得しない。

fetch('https://...', { next: { revalidate: 3600 } })

page.tsxやlayoutページで以下のように設定すると、そのページのfetch すべてが上記と同じ設定になる。 fetchに指定されている場合は、上書きされるのではなく一番小さい値が設定される。