1. 리뷰 재검증 기능

• 사용자가 리뷰를 작성하면, 자동으로 화면이 업데이트되어 방금 작성한 리뷰가 렌더링되어야 한다. 어떻게 해야할까?

• createReviewAction이 동작한 뒤에 ReviewList가 서버에서 다시 렌더링해서 클라이언트로 전송하게 하면 된다. 그 방법은..

revalidatePath();

"use server";

import { revalidatePath } from "next/cache";

export async function createReviewAction(formData: FormData) {
  const bookId = formData.get("bookId")?.toString();
  const content = formData.get("content")?.toString();
  const author = formData.get("author")?.toString();

  if (!bookId || !content || !author) {
    return;
  }

  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`,
      {
        method: "POST",
        body: JSON.stringify({ bookId, content, author }),
      }
    );
    console.log(response.status);
    revalidatePath(`/book/${bookId}`);
  } catch (err) {
    console.error(err);
    return;
  }
}

revalidatePath (/book/${bookId});

• 해당 메소드에 인자로 전달된 경로에 해당하는 페이지를 재검증 (재생성)한다.

• 리뷰를 작성하는 기존 코드에서 리뷰 작성 기능이 정상적으로 동작한 뒤에, revalidatePath 메소드로 '/book/${bookId}' 경로에 해당하는 페이지. 즉, 상세 서적 페이지의 리뷰 컴포넌트를 재검증 (재생성)하도록 하는 것이다.

• 리뷰 컴포넌트는 북 페이지의 일부, 따라서 북 페이지 전체가 다시 렌더링된다.

• revalidatePath는 서버 액션 혹은 서버 컴포넌트 내부에서만 호출이 가능하다.

• 문제는 전체 페이지가 재검증되면서 캐시 데이터가 모두 무효화되어버리는 것. force-cache 옵션이 걸려있어도 모두 삭제된다. 심지어 풀 라우트 캐시까지 사라진다. 기존 캐시를 제거하기만 하고, 새로 생성된 페이지로 캐시를 업데이트 해주지 않기 때문.

• 이렇게 사라진 캐시는, 다음 방문 시점에서 다시 업데이트 된다.

revalidatePath의 이해

• 기존 캐시의 저장 로직.

• revalidatePath의 동작에 의해 풀 라우트 캐시, 데이터 캐시가 무효화 된다.

• 데이터 캐시는 서버에서 응답이 들어오면서 다시 SET된다.

• 풀 라우트 캐시는 다음 요청시에 데이터가 응답되면서 SET된다. 이는 브라우저에서 페이지에 접속했을 때 무조건적으로 최신의 데이터를 보장하기 위함이다.

2. 재검증 방식은 다양하다.

• Next.js에서 제공하는 재검증 방식은 여러가지가 존재한다.

• 정확하게는 revalidatePath에서 제공하는 방법이 하나가 아니라는 것.

• 이전에 사용했던 revalidatePath("/book/[id]"); 방법은 특정 주소의 해당하는 페이지만 재검증하는 방법이다.

revalidatePath("/book/[id]", "page");

• 특정 경로의 모든 동적 페이지를 재검증.

• 학습 프로젝트 기준으로는 모든 북 페이지가 한번에 재검증하는 것.

• 당연하지만 이 방법에서 경로 인자에는 ${bookId} 같은 방법으로 특정 변수를 사용하는 것이 아니다.

revalidatePath("/(with-searchbar)", "layout");

• 특정 레이아웃을 갖는 모든 페이지 재검증.

• with-searchbar 레이아웃을 포함하고 있는 모든 페이지들을 한꺼번에 재검증.

revalidatePath("/", "layout");

• 모든 데이터 재검증.

• 이전 방식의 다른 사용 방법. 모든 페이지를 한꺼번에 재검증한다.

revalidateTag(review-${bookId});

• 태그 기준, 데이터 캐시 재검증.

• 이건 revalidatePath 메소드가 아니다. revalidateTag 메소드를 사용한다.

• 이전 데이터 페칭 시간에 배웠던 방법들 중. 배우지 않았던 또 다른 옵션이 존재한다. next: { tags : [] }가 바로 그것.

• 데이터 페칭 코드에서 태그를 설정하고, revalidateTag로 해당 태그를 인자로 넣어주면. 해당 태그에 해당되는 페이지의 캐시가 재검증된다.

• 사실 이 방법이 제일 효율적. 페이지 내부의 모든 데이터 캐시를 삭제해버리는 것이 그리 좋은 일이 아니기 때문. 반면에 revalidateTag는 특정 데이터 페칭에 해당하는 캐시만 재검증하기 때문에 불필요한 삭제 작업이 발생되지 않는다.

00. 강의 소개.

• 해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.