revalidate

데이터 재검증은 캐시된 데이터가 여전히 최신 상태인지 확인하는 프로세스이다. 캐싱은 성능을 향상시키는 데 도움이 되는 효과적인 기술이지만, 데이터가 변경될 수 있으므로 캐시된 데이터가 정확한지 확인하는 것이 중요하다.

시간 기반 재검증

• 특정 시간이 지난 후 캐시된 데이터를 자동으로 다시 확인 한다.

• 예를 들어, 매 5분마다 캐시된 데이터를 다시 확인하도록 설정할 수 있다.

• 해당 방법은 간단하지만 데이터 변경 빈도가 예측 불가능하거나 급격한 변경 가능성이 있는 경우에는 적합하지 않을수 있다.

fetch API와 next 옵션

fetch('https://...', { next: { revalidate: 3600 } })

• fetchAPI를 사용하여 원격 API를 호출하고 next옵션을 통해 재유효화 간격을 3600초로 설정한다.

• 이는 클라이언트 측에서 작동하며, 페이지가 처음 렌더링된 후 3600초가 지나면 API를 다시 호출하여 데이터를 새로 고쳐 캐시를 업데이트한다.

! 페이지 전체 데이터를 재유효화하기 때문에 비효율적일 수 있다. 서버 렌더링 페이지에는 적합하지 않는다.

getServerSideProps

export async function getServerSideProps({ req }) {
  // 데이터 소스 업데이트
  await updateData();

  // 캐시된 데이터 재유효화
  return {
    revalidate: 10, // 초 단위 재유효화 간격
  };
}

• getServerSideProps 함수를 사용하여 서버 측에서 데이터를 페치하고 revalidate 속성을 사용하여 재유효화 간격을 10초로 설정한다.

• 이는 서버 측에서 작동하며, 페이지가 처음 렌더링된 후 10초가 지날 때마다 서버에서 다시 데이터를 페치하고 캐시를 업데이트한다.

! 코드 작성이 복잡할수 있다.

요청 기반의 재검증

데이터는 요청시 서버액션에서 경로(revalidatePath), 또는 Route Handler에서 태그 (revalidateTag) 방식을 사용할 수 있다.

revalidateTag

특정 캐시 태그와 연결된 캐싱된 데이터를 수동으로 무효화하는 데 사용되는 Next.js 함수이다. 쉽게 말해, 특정 데이터 변경 사항이 발생했을 때 데이터와 연결된 캐시를 직접 제거할 수 있다는 의미이다.

사용예시

• 데이터 베이스가 업데이트되고 캐싱된 데이터가 더이상 유효하지 않은 경우 revalidateTag를 사용하여 해당 데이터와 연결된 캐시를 제거할 수 있다.

• 특정 페이지의 특정 부분만 업데이트 되었을 때 전체 페이지 캐시를 무효화하는 대신에 해당 부분의 캐시 태그만 제거할 수 있다.

---

revalidatePath

revalidatePath는 Next.js에서 특정 경로에 대한 캐싱된 데이터를 수동으로 무효화하는 데 사용되는 함수이다. 쉽게 말해, 특정 페이지를 다시 방문할 때 해당 페이지의 데이터만 업데이트하도록 캐싱 동작을 제어할 수 있다는 의미이다.

사용예시(Path)

• 현재 클라이언트 캐싱 제한 (임시) : revalidatePath는 클라이언트 라우터 캐싱에 있는 모든 경로를 무효화한다. 이동작은 일시적이며 향후 특정 경로만 무효화 되도록 업데이트 될 예정이다.

• 서버 캐싱 정확 동작 : 서버 측 라우터 캐싱에서는 revalidatePath를 사용하면 정확하게 특정 경로만 무효환 된다.