체험 상세 페이지 캐싱 전략

[Seon-K]

1. 설계 배경 및 목적

• 체험 상세 페이지 내 데이터의 신뢰성과 성능을 모두 확보하기 위한 캐싱 전략 수립
• 데이터 갱신 후에도 이전 값이 남아있는 문제 해결
• API 호출 횟수를 최소화하여 성능 최적화
• SSG, ISR, CSR을 혼합 사용하는 구조에서의 일관된 캐싱 무효화 정책 필요

---

2. 구성요소 및 구조

• 관련 디렉토리: /domain/Activity/services/detail, /hooks
• 주요 구성:
  • getActivityDetail: SSR 기반 서버 컴포넌트에서 호출, ISR 사용
  • useActivityReviews: 클라이언트 컴포넌트에서 React Query 기반 CSR 처리 (초기 데이터 패칭은 서버 컴포넌트에서 진행)
  • useAvailableSchedule: 클라이언트 컴포넌트에서 React Query 기반 CSR 처리
• 캐싱 대상:
  • 체험 상세 데이터
  • 리뷰 목록 (페이지네이션)
  • 예약 가능 날짜 (월별)

---

3. 동작 흐름 요약

• 사용자 요청 발생 시 SSR 또는 CSR 방식으로 각각의 API 호출
• fetch 또는 useQuery를 통해 데이터 패칭 및 캐시 저장
• 데이터 변경(리뷰 작성, 예약, 삭제 등) 발생 시 해당 queryKey 또는 태그 기반으로 무효화 수행
• 무효화 후 React Query 또는 Next.js가 자동으로 최신 데이터 재요청

---

4. 설계 의도 및 고려사항

• SSR/ISR 혼용 환경에서도 일관된 무효화 방식 확보
• React Query 캐싱을 활용한 데이터 중복 요청 최소화
• 클라이언트에서 필요한 데이터만 CSR 방식으로 효율적 로딩
• 예약 가능 날짜는 사용자의 실제 예약 가능 여부에 직접적인 영향을 미치므로 최신성이 중요하며, staleTime을 10분으로 설정하여 주기적으로 자동 갱신되도록 설정

---

5. 캐싱 무효화 방법

체험 상세 페이지에서 사용하는 다음 세 가지 데이터에 대해 각각의 캐싱 무효화 방법입니다.

---

1. 체험 상세 데이터 (getActivityDetail)

• 방식: Next.js App Router의 revalidateTag 사용
• 사용 조건: fetch 요청에 next: { tags: [...] } 포함되어 있어야 함
• 무효화 시점: 체험 정보 수정, 삭제 등

무효화 코드

'use server';
import { revalidateTag } from 'next/cache';

export async function revalidateActivityDetail(activityId: number) {
  await revalidateTag(`activity-detail-${activityId}`);
}

---

2. 체험 리뷰 목록 (useActivityReviews)

• 방식: React Query의 invalidateQueries
• 캐싱 조건: staleTime 30분, 1페이지는 initialData로 SSG/ISR 대응
• 무효화 시점: 리뷰 작성, 삭제 등

무효화 코드

queryClient.invalidateQueries({
  queryKey: ['activity-reviews', activityId, 1],
});

---

3. 예약 가능 날짜 (useAvailableSchedule)

• 방식: React Query의 invalidateQueries
• 캐싱 조건: staleTime 10분
• 무효화 시점: 예약 승인 등으로 예약 가능 날짜가 변경될 경우

무효화 코드

queryClient.invalidateQueries({
  queryKey: ['availableSchedule', activityId, year, month],
});

---

전체 예시

체험을 수정한 뒤, 관련 데이터를 모두 무효화하는 예시입니다.

await revalidateActivityDetail(activityId);

queryClient.invalidateQueries({
  queryKey: ['activity-reviews', activityId, 1],
});

queryClient.invalidateQueries({
  queryKey: ['availableSchedule', activityId, year, month],
});