React와 Next.js의 캐시 전략 이해하기

React의 cache와 Next.js의 unstable_cache는 비슷해 보이지만 중요한 차이점이 있습니다. 각각의 특징과 사용법을 자세히 알아보겠습니다.

1. React의 cache

React의 cache는 단일 요청 내에서만 작동하는 메모리 캐시입니다.

import { cache } from "react";

const getMessages = cache(async () => {
  console.log('DB 조회 실행');  // 실제 DB 조회 시점 확인용
  const messages = await db.messages.findMany();
  return messages;
});

// 요청 1 시작
async function MessagePage1() {
  const messages1 = await getMessages();  // DB 조회 실행 (로그 출력)
  const messages2 = await getMessages();  // 캐시된 결과 재사용 (로그 없음)
  const messages3 = await getMessages();  // 캐시된 결과 재사용 (로그 없음)
}

// 새로운 요청 시작 (다른 사용자 또는 페이지 새로고침)
async function MessagePage2() {
  const messages1 = await getMessages();  // 새로운 DB 조회 실행
  const messages2 = await getMessages();  // 이 요청 내에서만 캐시
}

특징

• 단일 요청 범위 내에서만 캐시 유지
• 요청이 완료되면 캐시 자동 삭제
• 서버 메모리에만 저장
• 간단한 중복 요청 방지에 적합

2. Next.js의 unstable_cache

Next.js의 unstable_cache는 여러 요청에 걸쳐 지속되는 캐시를 제공합니다.

import { unstable_cache } from "next/cache";

const getMessages = unstable_cache(
  async () => {
    console.log('DB 조회 실행');
    const messages = await db.messages.findMany();
    return messages;
  },
  ['messages-cache'],  // 캐시 키
  {
    revalidate: 3600,  // 1시간 캐시
    tags: ['messages'] // 캐시 태그
  }
);

// 첫 번째 요청
async function MessagePage1() {
  const messages = await getMessages();  // DB 조회 실행
}

// 1시간 이내의 다른 요청
async function MessagePage2() {
  const messages = await getMessages();  // 캐시된 결과 사용
}

// 1시간 후 요청
async function MessagePage3() {
  const messages = await getMessages();  // 새로운 DB 조회 실행
}

특징

• 여러 요청에 걸쳐 캐시 유지
• 설정된 시간 동안 캐시 유지
• 태그 기반 캐시 무효화 지원
• 영구 저장소 사용 가능

3. 사용 시나리오

React cache 사용 케이스

• 단일 페이지 렌더링 중 중복 DB 쿼리 방지
• 동일 요청 내 데이터 일관성 유지
• 간단한 메모리 최적화

unstable_cache 사용 케이스

• 자주 변경되지 않는 데이터 캐싱
• 여러 사용자가 공유하는 데이터
• 서버 부하 감소가 필요한 경우

4. 주의사항

React cache

• 클라이언트 컴포넌트에서 사용 불가
• 요청 간 데이터 공유 안됨
• 메모리 사용량 주의

unstable_cache

• 실험적 기능이므로 API 변경 가능성
• 캐시 무효화 전략 필요
• 저장소 공간 고려 필요

15에서는 'use cache' 사용하는게 좋다고 한다

https://nextjs.org/docs/app/api-reference/directives/use-cache

결론

두 캐시 전략은 각각의 용도에 맞게 사용해야 합니다:

• cache: 단일 요청 최적화
• unstable_cache: 장기적인 데이터 캐싱

적절한 캐시 전략 선택으로 애플리케이션의 성능을 최적화할 수 있습니다.