Next.js - (13) revalidatePath를 통한 캐시 유효성 갱신

 

이번 포스트에서는 Next.js에서 서버 액션(Server Action)을 이용해 데이터를 추가한 후, 페이지 캐시를 갱신하여 변경 사항이 바로 반영되도록 하는 방법을 살펴보겠습니다.

 

 

 

✅ 문제 상황

아래는 사용자가 폼을 제출해 새로운 게시물을 추가하고, /meals 페이지로 리디렉션하는 코드입니다

export async function shareMeal(prevState, formData) {
  "use server";

  const meal = {
    title: formData.get("title"),
    summary: formData.get("summary"),
    instructions: formData.get("instructions"),
    image: formData.get("image"),
    creator: formData.get("name"),
    creator_email: formData.get("email"),
  };

  if (isInvalidText(meal.title) || isInvalidText(meal.summary)) {
    return {
      message: "Invalid input.",
    };
  }

  await saveMeal(meal);
  redirect("/meals");
}

 

이 코드는 개발 환경에서는 정상 작동하며, 게시물 등록 후 /meals 페이지에 가면 곧바로 새 게시물이 보입니다.
하지만 프로덕션 빌드 후에는 새 게시물이 바로 반영되지 않습니다.

 

 

❓ 왜 그럴까요?

Next.js의 기본적인 데이터 캐싱 정책 때문입니다.

• /meals 페이지는 서버에서 처음 렌더링된 이후, 캐시된 HTML이 사용됩니다.
• 새로운 게시물을 추가해도 캐시가 갱신되지 않기 때문에 변경 사항이 보이지 않습니다.

 

✅ 해결 방법: revalidatePath

이를 해결하기 위해 Next.js에서 제공하는 revalidatePath 함수를 사용할 수 있습니다.

import { revalidatePath } from "next/cache";

await saveMeal(meal);
revalidatePath("/meals");
redirect("/meals");

 

revalidatePath(path, type?)

• path: 캐시를 무효화할 경로 (예: /meals)
• type: 'page' 또는 'layout' (기본값은 'page')

layout을 사용하면 해당 레이아웃을 공유하는 모든 중첩 라우트까지 포함해 캐시를 무효화합니다. 현재는 /meals 페이지만 갱신하면 되므로 기본값('page')을 사용하면 충분합니다.

 

 

🧪 최종 코드

"use server";

import { redirect } from "next/navigation";
import { saveMeal } from "./meals";
import { revalidatePath } from "next/cache";

function isInvalidText(text) {
  !text || text.trim() === "";
}

export async function shareMeal(prevState, formData) {
  "use server";

  const meal = {
    title: formData.get("title"),
    summary: formData.get("summary"),
    instructions: formData.get("instructions"),
    image: formData.get("image"),
    creator: formData.get("name"),
    creator_email: formData.get("email"),
  };

  if (isInvalidText(meal.title) || isInvalidText(meal.summary)) {
    return {
      message: "Invalid input.",
    };
  }

  await saveMeal(meal);
  revalidatePath("/meals");
  redirect("/meals");
}

 

 

 

 

✅ 정리

• Next.js에서는 캐싱 덕분에 성능이 좋아지지만, 데이터가 변한 후 이를 반영해주는 추가 작업이 필요합니다.
• revalidatePath를 통해 지정한 경로의 캐시를 무효화하면 변경된 데이터가 즉시 반영됩니다.
• 이 방식은 데이터 추가, 수정, 삭제 등 서버에서 상태 변화가 일어났을 때 매우 유용하게 사용됩니다.