[Q&A] On-Demand ISR 구현 중 질문

[cskime]

문제 상황

• 재현 과정
  • 특정 path를 revalidate하는 API route를 구현합니다.
  • /item/:id page에서 '수정하기' 버튼을 클릭하면 PATCH /items/:id API를 호출합니다.
  • 호출 직후 / 및 /items/:id page에 대해 /api/revalidate API를 호출해서 page를 재생성 합니다.
  • 그 후, router.replace("/")를 사용해서 홈 페이지로 이동합니다.
• 기대한 결과 : Detail page에서 변경한 내용이 home page(/)에 반영됩니다.
• 실제 결과 : Home page로 이동한 직후에는 변경 사항이 반영되지 않고, 새로고침을 해야 반영됩니다.

관련 코드

• /pages/api/revalidate/index.ts : POST 요청의 body에 전달된 path들에 대해 res.revalidate()를 각각 호출하여 해당 page를 재생성 하도록 구현했습니다.
• /pages/items/[id]/index.tsx : Item detail page 입니다. Page 컴포넌트 함수의 handleEditClick callback 함수에서,
  1. await editTodo() 함수를 호출해서 데이터 수정 요청을 보내고,
  2. 이후 await revalidate() 함수를 호출해서 page를 재생성한 뒤,
  3. router.push("/")를 호출해서 home page로 이동합니다.
• /pages/index.tsx : Home page 입니다.