Open2ヶ月前にコメント追加2

use cache

従来の主なキャッシュ手法(もう必要なくなるかも？)

fetch
React cache
Next.js unstable.cache
Route Segment Config

fetch

Next.jsによって拡張されたfetchの第二引数にはキャッシュするためのオプションを入れられる

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

キャッシュさせたい場合は 'force-cache'
させたくない場合は 'no-store' とする

再検証させる頻度なども変えられる

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

unstable_cache

fetchを使わないパターンでキャッシュさせる方法
第一引数にapiをリクエストするための関数を入れる
第二引数はタグ

import { getUser } from './data';
import { unstable_cache } from 'next/cache';
 
const getCachedUser = unstable_cache(
  async (id) => getUser(id),
  ['my-app-user']
);
 
export default async function Component({ userID }) {
  const user = await getCachedUser(userID);
  ...
}

これで無理やりキャッシュさせられる

Route Segment Config

セグメント単位でキャッシュさせたい場合

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

ワッキー

 新しいキャッシュ戦略！！
 use cache関数をレベル

コンポーネントレベル

ログインするとコメントできます