Next.js 11 - 서버 액션

"use server" : 서버 액션 정의

브라우저에서 호출되지만, 서버에서만 실제 실행되는 함수

"use server";

export async function createReviewAction(_: any, formData: FormData) {
  // ...
}

 

주의사항

・ use server는 반드시 지정된 위치에 선언

→ 1. 분리된 파일인 경우 : 반드시 파일 맨 위에

→ 2. 컴포넌트 안에 같이 정의된 경우 : 함수 안에서 선언 가능

・ use client와 반대 개념으로, 클라이언트에서 트리거는 가능하지만 브라우저에서는 실행 안 됨

→ 클라이언트에서는 서버 함수 실행 요청만 가능한 것

 

revalidatePath() : 페이지 캐시 재검증

특정 페이지나 경로에 해당하는 풀 라우트 캐시를 삭제하고 다음 요청 시 새로 생성하게 만드는 함수

revalidatePath(`/book/${bookId}`);

특징

・ 서버에서만 호출 가능 (use server 함수 내)

・ 정적 캐시(force-cache)가 설정되어 있어도 무시, 무조건 삭제됨

・ 페이지 전체가 재생성, 포함된 fetch 캐시도 모두 무효화

 

옵션

옵션	목적
revalidatePath('/example/123')	특정 동적 경로만 재검증
revalidatePath('/example/[id]', 'page')	특정 세그먼트 전체 재검증 (page 기준)
revalidatePath('/(example)', 'layout')	특정 레이아웃 포함 전체 재검증
revalidatePath('/', 'layout')	사이트 전체 재검증

 

revalidateTag() : 데이터 캐시 무효화

fetch() 호출 시 태그를 부여해 두면 해당 태그 기준으로 캐시만 선택적으로 무효화 가능

// 페칭 과정에서 태그 지정
await fetch('/api/reviews', {
  next: { tags: [`review-${bookId}`] },
});

// 서버 액션에서 특정 태그 호출
revalidateTag(`review-${bookId}`);

 

페이지 전체가 아닌 데이터만 무효화하기 때문에 revalidatePath 보다 범위가 작아 효율적이다.