[Next.js] Next.js 14 revalidateTag

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

 

revalidateTag란?

revalidateTag 함수를 사용하면 특정 캐시 태그에 연결된 모든 경로의 캐시를 무효화할 수 있다. 이를 통해 관련된 모든 페이지의 데이터를 한꺼번에 업데이트할 수 있다.

 

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

getFavoriteMovies.ts 코드

"use server";

import { SERVER_URL } from "@/constans";

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

 

먼저 데이터를 불러오는 fetch 함수에  특정 캐시 태그인 next: { tags: ["favorites"] } })를 추가한다.

 

addFavroiteMovie.ts 코드

"use server";

import { revalidateTag } 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),
  });
  revalidateTag("favorites");
  return response.json();
};

그 후 데이터를 추가하는 함수나 삭제하는 함수에 revalidateTag("favorites"); 를 추가해주면 된다.

 

이러면 'favorites'를 태그를 사용하는 fetch 데이터 캐시를 제거하고 최신 데이터를 다시 가져온다.

 

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>
  );
}

찜한 영화 목록을 불러온다.

 

실행화면

 

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

 

참고1: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation

 

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