1. 환경 설정 및 기본 구조
Step 1. next.config.ts
서버에서 발생하는 fetch 요청의 캐시 상태(HIT/MISS)와 처리 시간, URL을 터미널에 출력하도록 설정한다. 캐시가 의도대로 동작하는지 확인하는 데 필수적인 옵션이다.
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
reactCompiler: true,
logging: {
fetches: {
fullUrl: true,
},
},
};
export default nextConfig;2. 핵심 캐싱 구현
Step 2. Request Memoization 검증
const res = await fetch(URL, {
next: { revalidate: 3600 }, // 1시간 동안 캐시 유지
});
if (!res.ok) throw new Error("GitHub 데이터를 가져오는데 실패했습니다.");
return res.json();동일한 fetch 요청을 같은 렌더링 사이클 내에서 두 번 호출해 실제 네트워크 요청이 한 번만 발생하는지 확인한다.
next: { revalidate: 3600 }: Next.js가 표준 fetch를 내부적으로 확장한 옵션이다. 1시간 동안 데이터를 캐시에 유지하도록 지정한다. Next.js 15부터는 기본 캐싱이 비활성화되어 있으므로 명시적으로 선언해야 한다.
Step 3. Segment Config 캐싱
fetch 옵션을 직접 제어하기 어려운 환경(ORM, 외부 SDK 등)에서 파일 단위로 캐시 정책을 적용하는 방식이다.
import { NextResponse } from "next/server";
export const revalidate = 60; // 이 라우트의 응답을 60초간 캐시에 고정
export async function GET() {
...
}export const revalidate = 60: Segment Config Option으로, 이 파일의 최종 응답을 60초간 서버 캐시(Data Cache)에 고정한다. Next.js 15의 기본값은 동적 렌더링(매 요청마다 새로 연산)이므로, 트래픽이 집중되는 라우트에는 반드시 캐시 정책을 명시해야 한다.
3. 운영 환경 검증
캐시는 개발 모드(npm run dev)에서 정상 동작하지 않는다. 반드시 프로덕션 빌드로 확인해야 한다.
npm run build
npm start