[Next.js] Next.js 14 revalidatePath

Next.js를 사용하면서 캐싱된 데이터를 revalidatePath를 통해 새로 가져오는 방법에 대해 알아보자

 

revalidatePath란?

revalidatePath는 특정 경로에 대한 캐시된 데이터를 필요에 따라 지울 수 있는 기능이다. 이를 통해 특정 경로의 데이터를 업데이트할 수 있다.

 

찜한 영화 목록을 불러오는 api 함수와 찜 영화를 추가하는 함수로 예시를 보자

getFavoriteMovies.ts 코드

"use server";

import { SERVER_URL } from "@/constans";

export const getFavoriteMovies = async (id: any) => {
  const response = await fetch(`${SERVER_URL}/favorites/${id}`);
  return response.json();
};

 

영화 목록을 불러오는 api 함수이다.

 

해당 함수는 /user/[id] 폴더에 있는 page.tsx에서 실행된다. 즉 데이터가 변경될 때 /user/[id] 경로에 있는 데이터를 새로 가져오게 하면 된다.

page.tsx 코드

import { getFavoriteMovies } from "@/app/api/get-favorite-movies";
import FavoriteMovies from "../../_components/user/favorite-movies";
import style from "../../styles/user/page.module.css";

export default async function User({ params }: any) {
  const movies = await getFavoriteMovies(params.id);

  return (
    <div className={style.container}>
      <h4>찜한 영화 목록</h4>
      <FavoriteMovies movies={movies} />
    </div>
  );
}

 

이제 해당 데이터를 업데이트하는 함수(추가 버튼 등등..)에 revalidatePath('해당 경로', 'page')를 추가해주면 된다.

addFavroiteMovie.ts 코드

"use server";

import { SERVER_URL } from "@/constans";
import { revalidatePath} from "next/cache";

export const addFavoriteMovie = async (data: any) => {
  const response = await fetch(`${SERVER_URL}/favorites`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
  revalidatePath("/user/[id]", "page");
  return response.json();
};

 

실행화면

 

 

새로고침 없이 데이터가 추가되는 것을 확인할 수 있다.

 

참고1: https://nextjs.org/docs/app/api-reference/functions/revalidatePath

참고2: https://nomadcoders.co/nextjs-for-beginners/lectures/4705