문서
App Router 사용하기
unstableCache

unstable_cache

unstable_cache를 사용하면 데이터베이스 쿼리와 같은 비용이 많이 드는 작업의 결과를 캐시하고 여러 요청에 걸쳐 재사용할 수 있습니다.

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);
  ...
}

알아두면 좋은 점:

  • 캐시 범위 내에서 headers 또는 cookies와 같은 동적 데이터 소스에 접근하는 것은 지원되지 않습니다. 캐시된 함수 내에서 이 데이터가 필요한 경우, 캐시된 함수 외부에서 headers를 사용하고 필요한 동적 데이터를 인수로 전달하세요.
  • 이 API는 Next.js의 내장 데이터 캐시를 사용하여 요청과 배포 간에 결과를 유지합니다.

경고: 이 API는 불안정하며 향후 변경될 수 있습니다. 이 API가 안정화됨에 따라 필요한 경우 마이그레이션 문서와 코드모드를 제공할 예정입니다.

매개변수

const data = unstable_cache(fetchData, keyParts, options)();
  • fetchData: 캐시하려는 데이터를 가져오는 비동기 함수입니다. Promise를 반환하는 함수여야 합니다.
  • keyParts: 캐시에 추가적인 식별을 제공하는 키의 추가 배열입니다. 기본적으로 unstable_cache는 이미 인수와 함수의 문자열화된 버전을 캐시 키로 사용합니다. 대부분의 경우 선택사항입니다; 매개변수로 전달하지 않고 외부 변수를 사용할 때만 필요합니다. 그러나 매개변수로 전달하지 않는 경우 함수 내에서 사용된 클로저를 추가하는 것이 중요합니다.
  • options: 캐시 동작을 제어하는 객체입니다. 다음 속성을 포함할 수 있습니다:
    • tags: 캐시 무효화를 제어하는 데 사용할 수 있는 태그 배열입니다. Next.js는 이를 함수를 고유하게 식별하는 데 사용하지 않습니다.
    • revalidate: 캐시를 재검증해야 하는 시간(초)입니다. 무기한 캐시하거나 일치하는 revalidateTag() 또는 revalidatePath() 메서드가 호출될 때까지 캐시하려면 생략하거나 false를 전달하세요.

반환값

unstable_cache는 호출될 때 캐시된 데이터로 해결되는 Promise를 반환하는 함수를 반환합니다. 데이터가 캐시에 없는 경우, 제공된 함수가 호출되고 그 결과가 캐시되어 반환됩니다.

예시

app/page.tsx
import { unstable_cache } from 'next/cache';
 
export default async function Page({ params }: { params: { userID: string } }) {
 const getCachedUser = unstable_cache(
  async () => {
 
  return { id: params.userID };
    },
    [params.userID], // 여기서 userID를 keyParts에 추가하여 Next.js가 다른 userID에 대해 별도의 캐시를 만들 수 있도록 합니다.
    {
      tags: ["cached-user-tag"],
      revalidate: 60,
    }
);
  ...
}
app/page.jsx
import { unstable_cache } from 'next/cache';
 
export default async function Page({ params }) {
 const getCachedUser = unstable_cache(
  async () => {
 
  return { id: params.userID };
    },
    [params.userID], // 여기서 userID를 keyParts에 추가하여 Next.js가 다른 userID에 대해 별도의 캐시를 만들 수 있도록 합니다.
    {
      tags: ["cached-user-tag"],
      revalidate: 60,
    }
);
  ...
}

버전 기록

버전변경 사항
v14.0.0unstable_cache가 도입되었습니다.