캐싱과 재검증

next-nexus는 definition 객체 하나로 서버와 클라이언트의 캐싱 및 재검증 정책을 모두 관리합니다.

기본 원칙

• 기본 캐시 정책: server.cache 옵션을 생략하면 next-nexus는 기본적으로 no-store를 사용합니다. 이는 Next.js 버전과 관계없이 일관된 동작을 보장합니다. 정적 캐싱(ISR)이 필요한 경우에만 server.cache: 'force-cache'를 명시적으로 설정하세요.
• definition 설정:
  • server: { cache, revalidate, tags }: Next.js의 fetch 옵션(cache, next.revalidate, next.tags)으로 매핑되어 서버 캐시(ISR) 동작을 제어합니다.
  • client: { revalidate, tags }: 클라이언트의 인메모리 캐시 정책을 제어합니다.
• 캐시 키: 캐시 키는 definition(과 파라미터)을 기반으로 안정적으로 생성됩니다.
• ETag: ETag를 활용한 조건부 요청으로 데이터에 변경이 없을 경우 불필요한 페이로드 전송을 건너뜁니다.

Definition 예시 (팩토리 사용 필수)

import { createNexusDefinition } from "next-nexus";
 
export const createApiDefinition = createNexusDefinition({
  baseURL: "https://api.example.com",
  retry: { count: 1, delay: 1 },
  timeout: 5,
});
 
export const postsDefinition = {
  list: createApiDefinition<Post[]>({
    method: "GET",
    endpoint: "/posts",
    server: { cache: "force-cache", revalidate: 120, tags: ["posts"] },
    client: { revalidate: 120, tags: ["posts"] },
  }),
};

데이터 변경 후 재검증하기

• 클라이언트 캐시: revalidateClientTags(['posts'])를 호출합니다.
• 서버 캐시(ISR): 서버 액션 또는 라우트 핸들러 내부에서 await revalidateServerTags(['posts'])를 호출합니다.

팁

• 전체 목록을 위한 넓은 범위의 태그(예: ['posts'])와 개별 항목을 위한 세부 태그(예: ['post:123'])를 함께 사용하는 것이 좋습니다.
• revalidate 옵션은 캐시가 오래되었다고 판단하는 기준 시간(초)을 설정하며, CDN의 TTL과는 별개로 동작합니다.
• ETag와 하이드레이션의 조합으로 데이터 변경이 없을 때의 네트워크 전송량을 최소화할 수 있습니다.

함께 보기: Revalidation, Definitions.