[Next.js] Next.js 캐싱

verdantgreeny·2025년 3월 13일

본캠프

목록 보기

53/56

Next.js 캐싱

오늘은 Next.js에서 캐싱이 동작하는 원리에 대해 학습한 내용을 정리한다. Next.js는 다양한 영역에서 캐싱을 활용하여 성능을 최적화한다. 여기서는 Next.js의 핵심 캐싱 전략과 주요 메서드를 예시와 함께 살펴본다.

1. Next.js의 핵심 캐싱 전략

Next.js는 전체 페이지 캐싱(Full Route Cache)과 데이터 캐싱(Data Cache)을 기반으로 동작한다. 기본적으로 Next.js의 fetch 함수는 브라우저의 fetch API를 확장한 형태로, 캐싱 전략을 함께 제공한다.

1.1 Full Route Cache

Full Route Cache는 빌드 시점에 페이지를 렌더링하여 생성된 HTML과 데이터를 캐싱한다. 서버는 매 요청마다 페이지를 다시 렌더링하지 않고, 미리 생성된 결과를 제공한다.

React Server Component Payload를 생성한다.
이 Payload와 클라이언트 컴포넌트의 JavaScript 코드를 사용해 최종 HTML을 생성한다.
캐시는 지속적으로 유지되어 동일 페이지에 대한 요청 시 빠르게 응답한다.
데이터가 변경되거나 실시간 정보가 필요한 경우 revalidate 옵션을 통해 캐시를 무효화하거나 동적 렌더링을 선택한다.

1.2 Data Cache

Data Cache는 fetch 함수를 기반으로 데이터를 캐싱한다. 이 기능은 외부 API 요청 수를 줄이고 응답 시간을 개선한다.

기본적으로 fetch를 사용하면 데이터가 자동으로 캐싱된다.
동일 데이터에 대한 중복 요청을 방지한다.

예시 코드:

const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } });
const data = await res.json();

만약 캐싱하지 않고 매번 최신 데이터를 가져오고 싶다면 { cache: 'no-store' } 옵션을 사용한다.

const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
const data = await res.json();

1.3 Request Memoization

Request Memoization은 서버 컴포넌트 렌더링 중 동일한 fetch 요청이 여러 번 호출되더라도 실제 네트워크 요청은 한 번만 실행된다. 이 기능은 중복 네트워크 요청을 방지하여 서버 자원과 응답 시간을 최적화한다.

예시 코드:

async function getCommonData() {
  const res = await fetch('https://api.example.com/common-data');
  return res.json();
}

// 컴포넌트 A에서 호출한다.
const dataA = await getCommonData();

// 컴포넌트 B에서도 동일한 함수를 호출한다.
const dataB = await getCommonData();

위 코드에서 실제 네트워크 요청은 한 번만 발생한다.

2. Next.js 캐싱 메서드 및 설정값

Next.js 14 버전은 fetch 또는 Route Cache를 기반으로 캐싱을 수행한다. 개발자가 알아두면 좋은 몇 가지 설정값과 메서드를 소개한다.

2.1 generateStaticParams

이 메서드는 빌드 시점에 동적 경로를 미리 생성할 때 사용된다. 예를 들어, 여러 개의 제품 페이지를 정적으로 생성할 때 사용한다.

예시 코드:

// 예시: 여러 포스트의 슬러그를 생성한다.
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json());
  return posts.map((post) => ({ slug: post.slug }));
}

export default function Page({ params }) {
  const { slug } = params;
  // 해당 슬러그에 따른 페이지 로직 수행
}

2.2 tags

tags는 캐시된 데이터를 식별하고 관리하기 위해 사용된다. 특정 데이터나 페이지에 태그를 부여하여 관련 데이터를 효율적으로 무효화할 수 있다.

예시 코드:

fetch('/api/data', {
  next: {
    revalidate: 60,
    tags: ['product', 'category']
  }
});

2.3 revalidate

revalidate 옵션은 캐시된 데이터가 만료되는 주기를 초 단위로 설정한다. 지정된 시간이 지나면 Next.js는 데이터를 다시 가져와 캐시를 갱신한다.

예시 코드:

fetch('/api/data', {
  next: {
    revalidate: 10
  }
});

2.4 revalidateTags

revalidateTags는 특정 태그에 연결된 캐시된 데이터를 강제로 무효화하고 재검증하는 기능이다. 데이터가 변경될 때 캐시를 즉시 갱신할 수 있다.

예시 코드:

import { revalidateTag } from 'next/server';

async function updateProduct(req, res) {
  // 'product' 태그가 붙은 캐시를 무효화한다.
  revalidateTag('product');
  res.status(200).json({ message: 'Product updated and cache revalidated' });
}