Next.js Caching

Router Cache와 관련된 이슈
https://github.com/vercel/next.js/issues/65170

repository: https://github.com/mirkonasato/force-dynamic-issue

• fetch 함수의 캐시 옵션을 설정하거나 route segment config 설정을 통해 Data Cache를 무효화 또는 선택 해제할 수 있다.

• fetch 함수에 캐시 옵션을 따로 설정하지 않으면 기본 동작으로 한 번의 요청 이후로는 쭉 Data Cache에 저장된 캐시 데이터를 받아온다.

• 캐시 옵션을 해제하고 동적 렌더링을 적용하여도 클라이언트에 Router Cache가 존재하기 때문에 새로고침 없이는 바로 변경된 데이터를 받아볼 수 없다. 새로고침 없이는 Router Cache의 자동 무효화 주기 이후에 새로 접속 시 변경된 데이터를 받아볼 수 있다.

변경된 데이터를 바로 받아보려면

• 캐시 옵션 해제 + router.refresh

• revalidatePath 또는 revalidateTag 사용

응답까지 오는 시간 비교

cache: 19.76ms vs no-cache: 973.89ms
전체 요청 시간이 길어짐 → 서버에서 새 데이터를 가져와야 하기 때문.