🚀
Next.js あんまり知らないけど重要なFetch,cache,revalidating
導入
Next.jsのfetch, cache, revalidatingって重要だけど勉強するのにハードルがあると感じる人のために記事を書きました。この記事を最後まで読めば、fetch,cache,revalidatingについて理解できます。
それぞれの意味
fetch:データを他のところから取ってくる
cache:近くにデータを貯めておく。近くにデータを貯めておくので、再びデータが必要になっても、すぐに取り出せる。(cacheしない場合、遠くの場所にデータを貯めておくため、データを取ってくるのに時間がかかる。)
revalidating:ページを検証する。データを更新させたいときに使う（データをとってくる）
サーバー側ではasync/awaitと一緒に使います
fetch
const async function getData(){
const res=await fetch('https://api.example.com/...')
}
if(!res.ok){
throw new Error('failed to fetch data')
}
return res.json
export default async function Page(){
const data=await getData()
return <div></div>
}
fetchはデフォルトでは、cacheされないように設定されています(つまり、デフォルトではデータを遠くに貯めているといこと)。cacheさせるためには、以下のように記述します。
const res = await fetch('https://api.example.com/...',{cache:'force-cache'})
fetchのcacheの種類2つ
force-cache:cacheさせる
no-store:cacheさせない
cacheされないとき
- サーバーアクション(サーバー上('use server')で実行される非同期関数)の中で使われるとき
- POSTメソッドを使うルートハンドラーの中で使われるとき
revalidating
cacheされたdataをrevalidateする2つの方法
- revalidationの時間を決める
fetch('https://...',{next:{revalidate:360}})
- あるrevalidateTagによってrevalidateさせる
app/page.tsx
export default async function Page(){
const res=await fetch('https://...',{next:{tags:['collection']}})
const data=await res.json()
}
上のコードでは、cacheにcollectionという名前をつけた
app/actions.ts
import {revalidateTag} from 'next/cache'
export default async function action(){
revalidateTag('collection')
}
dataがcacheされない例
- cache:'no-store'がfetchに設定されているとき
- revalidate:0が設定されているとき
- POSTメソッドの中でfetchされているとき
などなど
まとめ
fetch:データを他のところから取ってくる
cache:近くにデータを貯めておく。近くにデータを貯めておくので、再びデータが必要になっても、すぐに取り出せる。(cacheしない場合、遠くの場所にデータを貯めておくため、データを取ってくるのに時間がかかる。)
revalidating:ページを検証する。（データをとってくる）
参考文献:
Discussion