Next.js 기초 입문 18주차: 데이터 캐싱 및 재검증 (Caching & Revalidation) 심층 분석

📌 이번 회차 학습 목표

• Next.js의 다양한 데이터 캐싱 전략을 설명할 수 있습니다.
• 데이터 재검증의 필요성과 작동 원리를 이해하고 적용할 수 있습니다.
• ISR(Incremental Static Regeneration)의 개념과 활용 방법을 숙지합니다.
• SSR(Server-Side Rendering)과 캐싱의 관계를 파악하고 적절히 활용할 수 있습니다.
• Next.js 애플리케이션에서 캐싱 및 재검증을 통해 성능을 최적화하는 방법을 학습합니다.

📝 개념 설명: Next.js의 데이터 캐싱 및 재검증

웹 애플리케이션에서 데이터를 가져오는 과정은 네트워크 지연, 서버 부하 등의 문제로 인해 성능 저하를 일으킬 수 있습니다. 캐싱(Caching)은 이러한 문제를 해결하기 위해 데이터를 미리 저장해두고, 동일한 요청이 들어올 경우 저장된 데이터를 즉시 반환하여 응답 시간을 단축하고 서버 부하를 줄이는 기술입니다. 그러나 캐싱된 데이터가 항상 최신 상태를 유지하는 것은 아니므로, 재검증(Revalidation)을 통해 캐시된 데이터를 주기적으로 업데이트하거나 필요에 따라 무효화하는 과정이 필수적입니다.

Next.js의 데이터 캐싱 전략

Next.js는 다양한 데이터 페칭 방식과 함께 강력한 캐싱 메커니즘을 제공합니다. 주요 캐싱 전략은 다음과 같습니다.

1. 정적 캐싱 (Static Caching)

Next.js는 기본적으로 next build 시 생성되는 정적 파일들(HTML, CSS, JS, 이미지 등)을 캐싱합니다. 이 파일들은 CDN(Content Delivery Network)에 배포되어 사용자에게 가장 가까운 서버에서 제공되므로 매우 빠른 로딩 속도를 보장합니다. 이는 주로 SSG(Static Site Generation) 방식으로 빌드된 페이지에 해당합니다.

2. 데이터 캐싱 (Data Caching)

Next.js 13부터는 App Router를 통해 데이터 페칭 방식이 개선되었으며, 기본적으로 Fetch API를 확장하여 캐싱 기능을 내장하고 있습니다. 이는 서버 컴포넌트에서 데이터를 가져올 때 자동으로 적용됩니다.

• Request Memoization: 동일한 요청이 하나의 렌더링 패스 내에서 여러 번 발생할 경우, 첫 번째 요청의 결과를 메모리에 저장하여 재사용합니다. 이는 불필요한 중복 데이터 페칭을 방지합니다.
• Data Cache: fetch() 요청의 결과는 Next.js 데이터 캐시에 저장됩니다. 이 캐시는 빌드 시점 또는 런타임에 생성될 수 있으며, ISR(Incremental Static Regeneration)과 같은 재검증 전략과 결합하여 사용됩니다.

3. Incremental Static Regeneration (ISR)

ISR은 SSG의 장점(빠른 로딩, CDN 활용)과 SSR의 장점(최신 데이터)을 결합한 강력한 캐싱 전략입니다. 페이지를 빌드 시점에 생성하지만, 특정 시간 간격(revalidate 옵션)마다 백그라운드에서 페이지를 재생성하여 최신 데이터를 반영합니다.

4. Server-Side Rendering (SSR)과 캐싱

SSR은 요청 시마다 서버에서 페이지를 렌더링하여 사용자에게 제공합니다. 기본적으로 SSR은 캐싱되지 않는다고 생각할 수 있지만, Next.js의 fetch()는 SSR 환경에서도 데이터 캐싱을 지원합니다. 즉, fetch()를 사용하여 데이터를 가져올 경우, 서버에서 해당 데이터를 캐시하고 재검증할 수 있습니다.

데이터 재검증 (Revalidation)

캐시된 데이터는 시간이 지남에 따라 구식이 될 수 있습니다. 재검증은 이러한 캐시된 데이터를 최신 상태로 업데이트하는 과정입니다. Next.js에서는 두 가지 주요 재검증 방법을 제공합니다.

1. 시간 기반 재검증 (Time-based Revalidation)

특정 시간 간격마다 캐시된 데이터를 자동으로 재검증합니다. 이는 fetch() 함수의 next.revalidate 옵션 또는 export const revalidate = N 옵션을 통해 설정할 수 있습니다.

// fetch() 함수 내에서 시간 기반 재검증 설정
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // 60초마다 데이터 재검증
  });
  return res.json();
}

// 페이지 또는 레이아웃에서 시간 기반 재검증 설정
export const revalidate = 3600; // 3600초(1시간)마다 페이지 재검증

async function Page() {
  const posts = await getPosts();
  // ...
}

2. 온디맨드 재검증 (On-demand Revalidation)

데이터가 변경되었을 때 API 엔드포인트를 통해 수동으로 캐시를 무효화하고 재검증을 트리거합니다. 이는 CMS(콘텐츠 관리 시스템)에서 게시물을 업데이트하거나 데이터베이스 변경이 발생했을 때 유용합니다.

// app/api/revalidate/route.js (API 라우트 예시)
import { NextResponse } from 'next/server';
import { revalidatePath, revalidateTag } from 'next/cache';

export async function GET(request) {
  const tag = request.nextUrl.searchParams.get('tag');
  const path = request.nextUrl.searchParams.get('path');

  if (tag) {
    revalidateTag(tag); // 특정 태그로 캐시된 데이터 재검증
    return NextResponse.json({ revalidated: true, now: Date.now(), tag });
  } else if (path) {
    revalidatePath(path); // 특정 경로의 페이지 캐시 재검증
    return NextResponse.json({ revalidated: true, now: Date.now(), path });
  }

  return NextResponse.json({ revalidated: false, now: Date.now(), message: 'Missing tag or path' });
}

💡 예제 & 실습: ISR 및 온디맨드 재검증 구현

다음 예제를 통해 Next.js App Router에서 ISR과 온디맨드 재검증을 어떻게 구현하는지 살펴보겠습니다. 간단한 블로그 게시물 목록을 가져와 표시하고, 60초마다 재검증되도록 설정하며, API 엔드포인트를 통해 수동으로 재검증하는 시나리오입니다.

1. 블로그 게시물 목록 페이지 (ISR 적용)

app/posts/page.js 파일을 생성하고 다음과 같이 작성합니다.

// app/posts/page.js

// 이 페이지의 캐시를 60초마다 재검증하도록 설정합니다.
// 이는 ISR(Incremental Static Regeneration)을 구현하는 방법 중 하나입니다.
export const revalidate = 60; 

async function getPosts() {
  // fetch 요청에 캐싱 및 재검증 옵션을 직접 설정할 수도 있습니다.
  // const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
  //   next: { revalidate: 60 } 
  // });
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>블로그 게시물 목록 (ISR 적용)</h1>
      <p>이 페이지는 60초마다 재검증됩니다. (현재 시간: {new Date().toLocaleTimeString()})</p>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body.substring(0, 100)}...</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

• export const revalidate = 60;: 이 페이지는 60초마다 백그라운드에서 데이터를 다시 가져와 재생성됩니다. 사용자는 항상 캐시된 버전을 먼저 받지만, 60초가 지나면 다음 요청 시 최신 데이터가 반영된 페이지를 보게 됩니다.
• https://jsonplaceholder.typicode.com/posts: 테스트를 위해 가상의 API를 사용합니다. 실제 애플리케이션에서는 백엔드 API를 사용합니다.
• 페이지에 현재 시간을 표시하여 재검증이 실제로 일어나는지 시각적으로 확인할 수 있습니다.

2. 온디맨드 재검증 API 라우트 구현

app/api/revalidate-posts/route.js 파일을 생성하고 다음과 같이 작성합니다.

// app/api/revalidate-posts/route.js

import { NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';

export async function GET(request) {
  // API 키를 사용하여 보안을 강화할 수 있습니다.
  // const authHeader = request.headers.get('Authorization');
  // if (authHeader !== `Bearer ${process.env.MY_SECRET_TOKEN}`) {
  //   return new Response('Unauthorized', { status: 401 });
  // }

  try {
    // '/posts' 경로의 캐시를 재검증합니다.
    // 이 함수를 호출하면 Next.js는 해당 경로의 캐시를 무효화하고,
    // 다음 요청 시 새로운 데이터를 가져와 페이지를 재생성합니다.
    revalidatePath('/posts');
    return NextResponse.json({ revalidated: true, now: Date.now() });
  } catch (err) {
    return NextResponse.json({ revalidated: false, message: 'Error revalidating', error: err.message });
  }
}

• 이 API 라우트는 /api/revalidate-posts 경로로 GET 요청이 들어오면 revalidatePath('/posts')를 호출하여 /posts 페이지의 캐시를 즉시 무효화합니다.
• 실제 환경에서는 보안을 위해 API 키 등을 사용하여 이 엔드포인트에 대한 접근을 제한해야 합니다.

실습 방법:

1. 위 두 파일을 Next.js 프로젝트의 app 디렉토리 안에 각각 생성합니다.
2. 터미널에서 npm run dev 또는 yarn dev를 실행하여 개발 서버를 시작합니다.
3. 브라우저에서 http://localhost:3000/posts에 접속합니다.
4. 페이지의 현재 시간을 확인합니다. 60초가 지나면 페이지를 새로고침했을 때 시간이 업데이트되는 것을 볼 수 있습니다 (ISR 작동).
5. 새 탭에서 http://localhost:3000/api/revalidate-posts에 접속하여 API를 호출합니다.
6. 다시 http://localhost:3000/posts 페이지로 돌아와 새로고침하면, 60초가 지나지 않았더라도 시간이 즉시 업데이트되는 것을 확인할 수 있습니다 (온디맨드 재검증 작동).

⚠️ 자주 틀리는 것 / 주의사항

🔗 다음 회차 예고

이번 회차에서는 Next.js의 데이터 캐싱 및 재검증 메커니즘을 학습했습니다. 다음 19회차에서는 에러 핸들링 및 로딩 UI (Error Handling & Loading UI)를 주제로, 사용자에게 더 나은 경험을 제공하기 위한 에러 처리 전략과 로딩 상태 관리에 대해 심도 있게 다룰 예정입니다. 애플리케이션의 안정성과 사용성을 높이는 방법을 함께 탐구해 봅시다.