nextjs15의 캐싱
request memoization
요청 메모이제이션은 Next.js 기능이 아니라 React 기능임!!
react는 fetch API를 확장하여 동일한 URL과 옵션을 가진 요청을 자동으로 메모이제이션한다!
-> React 컴포넌트 트리의 여러 위치에서 동일한 데이터에 대해 fetch 함수를 호출하면서 한 번만 실행할 수 있다는 뜻!
경로 전체에서 동일한 데이터를 사용해야 하는 경우 driling하는 대신, 성능 걱정할 필요 없이 필요한 구성 요소에서 데이터를 가져올 수 있다!
-> 어? zustand 필요없지않나 그럼??
-> GET만 된다고 함..................
-> 뭐..그래도 단순 값 받아오는 데에는 유용하게 쓸 수 있겠다..
async function getItem() { //캐싱
const res = await fetch('https://.../item/1')
return res.json()
}
const item = await getItem() // 이때 캐시됨
const item = await getItem() // 재호출x 캐시 씀!!
Data cache
Next.js에는 들어오는 서버 요청 및 배포 간에 데이터 가져오기 결과를 유지하는 기본 제공 데이터 캐시가 있다!
-> 요청 메모이제이션 메모리에서 저장 못하는 애를 여기서 저장할 수 있음!
데이터 캐시와 요청 메모이제이션의 차이점
데이터 캐시는 들어오는 요청 및 배포 전반을 모두 캐시함
메모이제이션은 요청의 수명 동안만 지속됨
유효성 재검증 (캐시 업데이트)
시간 기반 재검증
fetch('https://...', { next: { revalidate: 3600 } })ondemand 재검증
필요할 때마다 purge하는 방식.
revalidateTag('posts')캐시 안 하기
let data = await fetch('https://...', { cache: 'no-store' })전체 경로 캐시
Next.js는 빌드 시 경로를 자동으로 렌더링하고 캐시한다!
1. 서버의 렌더링
Next.js는 React의 API를 사용하여 서버에서 렌더링을 관리
청크 분할
개별 경로, 세그먼트, 그리고 Suspense 경계를 기준으로 청크로 분할됨
청크 렌더링
- SSC 렌더링(React)
서버 컴포넌트를 React Server Component Payload(스트리밍 최적화 데이터 형식)로 렌더링 - HTML 렌더링(Nextjs)
서버에서 HTML을 렌더링
-> 해당 렌더링 작업들은 완료되는 대로 응답을 스트리밍한다!
-> 서버에서 해당 응답들을 캐시!
2. 수화와 조정
Hydration
서버에서 렌더링된 HTML(비대화식)에 클라이언트 측이 Js를 붙여 대화형으로 만드는 과정
Reconciliation
서버 렌더링 HTML과 클라이언트 렌더링 React 트리를 비교
-> react가 DOM에 필요한 변경사항만 적용하고 UI를 갱신하는 과정
3. 클라이언트 라우터 캐시
React Server 구성 요소 페이로드는 클라이언트 측 라우터 캐시(개별 경로 캐시)에 저장된다!
-> 정적 경로는 기본적으로 캐싱되고, 동적 경로는 캐싱되지 않음!
-> Next15부터 페이지는 기본적으로 캐시되지 않는다! (레이아웃, 로딩은 캐시됨)
-> 혹은 Link태그에 prefetch=false 설정해도 됨.
라우터 캐시 재검증하기
revalidatePath('/')revalidatePath와 router.refresh의 차이
router.refresh는 클라이언트 라우터 캐시만 지워짐
revalidatePath는 서버 데이터 캐시와 서버 전체 경로 캐시 전부 지워짐
캐시 인터렉션
동적 api 캐시
쿠키 및 헤더와 같은 동적 API, searchParams를 사용하면 동적 경로로 판단된다!
-> 전체 경로 캐시에서 해당 경로 지워짐
-> 라우터 캐시에서 해당 캐시 무효화
generateStaticParams
generateStaticParams는 전체 경로 캐시에 캐시
-> 동적 경로여도 캐시된다!
export async function generateStaticParams() {
const posts = await fetch('https://.../posts')
return posts.map((post) => ({
slug: post.slug, //이게 캐시된다
}))
}