[Next] unstable_cache

unstable_cache란?

unstable_cache는 특정 함수 호출의 결과를 캐싱해서, 같은 인수로 함수가 다시 호출될 때 데이터베이스를 다시 조회하거나 API를 호출하는 대신 캐시된 값을 즉시 반환하게 만듭니다. 이로써 불필요한 데이터 요청을 줄여 응답 시간을 단축하고 서버 부하를 줄일 수 있습니다.

이 함수는 Next.js의 내장 캐싱 시스템과 통합되어 동작하기 때문에, 일반적인 메모이제이션(memoization) 함수보다 더 강력합니다. 특히 Vercel 환경에서 배포될 때 Next.js 캐시 레이어와 긴밀하게 작동하도록 설계되었습니다.

 

 

사용법

unstable_cache는 revalidate와 tags라는 두 가지 주요 옵션을 사용합니다.

JavaScript

 

import { unstable_cache } from 'next/cache';

const getMyData = unstable_cache(
  async (userId) => {
    // 이 함수의 결과가 캐시됩니다.
    // userId가 같은 요청이 오면 이 코드는 다시 실행되지 않습니다.
    const data = await fetch(`https://api.example.com/data/${userId}`);
    return data.json();
  },
  ['my-data-key'], // 캐시 식별자
  {
    revalidate: 60, // 60초마다 캐시 갱신
    tags: ['posts'], // 'posts' 태그가 무효화될 때 함께 무효화
  }
);

주요 옵션

• revalidate: 캐시의 유효 기간을 초 단위로 설정합니다. 이 시간이 지나면 다음 요청 시 함수가 다시 실행되어 캐시를 갱신합니다.
• tags: 캐시에 태그를 부여합니다. revalidateTag(‘posts’) 함수를 사용하여 특정 태그를 가진 모든 캐시를 수동으로 무효화할 수 있습니다. 이는 데이터가 변경되었을 때 즉시 캐시를 최신 상태로 만드는 데 유용합니다.

---

추가적으로

 

revalidatePath의 역할

revalidatePath는 사용자가 특정 페이지에 접근했을 때 생성된 HTML 캐시를 무효화합니다. 이렇게 캐시가 무효화되면, 다음 요청 시 해당 페이지는 캐시된 데이터를 사용하는 대신 서버에서 다시 렌더링되어 최신 정보를 가져오게 됩니다.

이 기능은 CMS(콘텐츠 관리 시스템)나 백엔드에서 데이터가 업데이트되었을 때, 프런트엔드 페이지를 자동으로 갱신해야 할 때 특히 유용합니다.

사용법

revalidatePath는 revalidateTag와 유사하게 동작하지만, 태그 대신 **경로(path)**를 기반으로 캐시를 무효화합니다.

JavaScript

 

// app/actions.ts (Server Action 예시)
"use server";

import { revalidatePath } from 'next/cache';

export async function createPost() {
  // 1. 데이터베이스에 새 게시물 추가
  await db.post.create({ /* ... */ });

  // 2. 게시물 목록 페이지의 캐시를 초기화
  revalidatePath('/posts');
}

위 코드에서 createPost라는 서버 액션이 실행되면, revalidatePath('/posts')가 호출되어 /posts 경로의 캐시가 무효화됩니다. 다음 사용자가 /posts 페이지에 접근하면, Next.js는 최신 게시물 목록을 포함하여 페이지를 다시 렌더링하게 됩니다.

 

 

---

fetch함수에서도 비슷한 기능을 사용할 수 있다

 

fetch 함수의 캐싱 기능

Next.js 환경에서 fetch 함수는 기본적으로 자동으로 캐시를 적용합니다. 이 동작은 cache 옵션을 통해 제어할 수 있습니다.

• cache: 'force-cache' (기본값): fetch는 요청을 캐시하고, 동일한 URL에 대한 다음 요청 시 캐시된 결과를 사용합니다. 서버 컴포넌트에서 fetch를 사용하면 이 옵션이 기본적으로 활성화됩니다.
• cache: 'no-store': 요청을 캐시하지 않고, 항상 새로운 데이터를 가져옵니다. 동적인 데이터나 자주 변경되는 데이터를 가져올 때 유용합니다.
• cache: 'no-cache': 요청을 캐시하지만, 다음 요청 시 서버에 데이터를 재검증(revalidate)하여 최신 버전인지 확인합니다.

---

revalidate 옵션을 통한 재검증

fetch 함수는 revalidate 옵션을 사용하여 시간 기반 캐시 재검증을 설정할 수 있습니다.

JavaScript

 

// 60초마다 캐시 갱신
const response = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 } // 60초가 지나면 다음 요청 시 캐시 갱신
});

위 코드는 revalidate 태그를 사용한 것과 유사하게, 60초마다 데이터가 자동으로 갱신됩니다.

---

태그를 이용한 재검증 (tags)

fetch 함수는 revalidateTag와 직접적으로 연동되는 tags 옵션도 제공합니다.

JavaScript

 

// 'posts' 태그를 사용하여 fetch 요청
const response = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] }
});

// 데이터가 업데이트되면 태그를 통해 캐시를 초기화
// (서버 액션, 라우트 핸들러 등에서 사용)
import { revalidateTag } from 'next/cache';

revalidateTag('posts');