Next js Caching

3 Layers of Cache

요약

1. Data Cache (server side, when fetch)
2. Full Route Cache (server side, when render page)
3. Router Cache (client side)

세부

1. Data Cache

   • fetch()로 같은 데이터 얻어오는 걸 여러 번 하면, 최초에 얻어올 때 캐싱한 것을 반환한다.
   • file system 에 저장됨
   • 재배포 하기 전까지 유지됨
   • 갱신하고 싶을 땐

   fetch("...", {cache: "no-store"})
   // or
   fetch("...", {cache: { revalidate: 3600 }}) // 초

   • fetch route 사용할 때만 걱정하면 됨

2. Full Route Cache (Cache on the Server)

   • static page는 캐시해둠
   • 재배포하기 전까지 유지됨
   • 데이터가 갱신된 걸 보여주기 위해선 캐시를 꺼야 함

3. client cache

   • client side 에서 저장되는 캐시
   • 같은 페이지 요청하면 캐시된 걸 보여줌
   • refresh 하기 전까지 유지됨

   const IssueForm = ({ issue }: { issue?: Issue }) => {
   	const router = useRouter() 
   	function onClick() => {
   		router.refresh()
       }
   }

   • ( 현재 버전에서는 자동 갱신을 해주는지 refresh를 안 해도 갱신된다. )

2. Full Route Cache 추가 내용

Rendering: Static vs Dynamic

1. 판단 기준
   • route with parameter: dynamic
   • route without parameter: static

Make Static Page Dynamic

// 파일 마지막에
export const dynamic = "force-dynamic"
// or
export const revalidate = 0 // 초

관련 문서

Next.js Route Segment Config