Next.js에서 UpdateTag와 revalidateTag의 차이와 화면을 갱신하는 방법

updateTag

packages/next/src/server/web/spec-extension/revalidate.ts

export function updateTag(tag: string) {
    const workStore = workAsyncStorage.getStore()

    if (!workStore || workStore.page.endsWith('/route')) {
      throw new Error(
        'updateTag can only be called from within a Server Action.'
      )
    }

    // 🔥 핵심: profile을 undefined로 전달
    return revalidate([tag], `updateTag ${tag}`, undefined)
  }

특징:
- Server Action에서만 사용 가능
- profile: undefined → 항상 즉시 만료 전략
- Read-Your-Own-Writes 보장

revalidateTag

packages/next/src/server/web/spec-extension/revalidate.ts

export function revalidateTag(tag: string, profile: string | CacheLifeConfig) {
  if (!profile) {
    console.warn(
      '"revalidateTag" without the second argument is now deprecated, add second argument of "max" or use "updateTag". See more info here: https://nextjs.org/docs/messages/revalidate-tag-single-arg'
    )
  }
  return revalidate([tag], `revalidateTag ${tag}`, profile)
}

특징:
- Server Action + Route Handler 모두 사용 가능
- profile 파라미터로 캐시 전략 제어
- profile에 따라 Read-Your-Own-Writes 보장 여부가 달라짐

profile에 따른 Read-Your-Own-Writes 여부

- undefined 또는 {expire: 0}: 즉시 만료 → pathWasRevalidated 설정 → RSC payload 포함 → Read-Your-Own-Writes
- 'max' 또는 기타 값: SWR 패턴 → pathWasRevalidated 미설정 → RSC payload 없음 → 기존 화면 유지
profile이 undefined라면 내부동작과, 서버, 클라이언트는 다음과같이 수행합니다.

// revalidate(['products'], 'updateTag products', undefined)

    // 내부 동작:
    // - pendingRevalidatedTags: ['products']
    // - pathWasRevalidated = 1 
  }

  // Server Response:
  // Header: x-action-revalidated: "1"
  // - isTagRevalidated = 1 (태그가 있으니)
  // - skipPageRendering = false (pathWasRevalidated가 1이니)
  // Body: {
  //   a: result,
  //   f: [flightData],  
  // }

  // Client:
  // - revalidationKind = 1
  // - currentCacheVersion++ 
  // - Flight data로 즉시 리렌더 
  // - Read-Your-Own-Writes 보장

x-action-revalidated 헤더값은 값에 따라 다음과같은 열할을 수행합니다.
- "0" = ActionDidNotRevalidate - 재검증 없음
- "1" = ActionDidRevalidateStaticAndDynamic - 태그/쿠키 재검증
- "2" = ActionDidRevalidateDynamicOnly - 동적 데이터만 재검증

https://github.com/vercel/next.js/pull/86878

https://github.com/vercel/next.js/pull/86878에서 변경되었습니다. 16.1.0 미만 버전은 아래 내용을 참고해주세요.
서버액션에서 UpdateTag를 사용하게되면 Response의 헹더에서 x-action-revalidated 응답에 [[],1,0] 값을 반환하게됩니다.
[] - revalidated된 경로가 없음 1 - 태그가 revalidate 되었음 (isTagRevalidated = 1) 0 - 쿠키는 revalidate 되지 않음
그리고 새롭게 렌더링한 페이지의 서버 컴포넌트의 RSC payload로 전달하게됩니다. CLient에서는 header 값을 통해 currentCacheVersion을 업데이트하고, 응답으로 받은 RSC payload를 통해 화면을 재조정하게됩니다. 이를 통해 화면을 갱신할 수있게됩니다.
revalidateTag를 사용하면 태그를 무효화하지만 컴포넌트를 리렌더링하며 RSC payload를 응답으로 전달하지는않습니다. header의 x-action-revalidated에는 [[],1,0]로 값이 반환되어 화면을 갱신하지 않습니다.

buy me a coffee