11일차 학습 요약
- Next13 캐싱 시스템
- Static and Dynamic Rendering 정적 , 동적 렌더링
- client server cache 작동 방식
- Next 의 캐시 정책으로 인해 최신 데이타가 반영되지 않는 문제
Next13 캐싱 시스템
-
페이지를 요청하면 client router cache 에서 반환할 RSC(React server Component) 찾아 반환한다 만약 존재하지 않는다면 서버로 요청한다 받아온 RSC를 router cache에 캐싱한다
-
서버에서 RSC를 반환하기 위해 빌드를 시작한다 full route cache 에서 캐싱 된 RSC payload 와 HTML을 찾는다 이때 캐싱된 값이 없다면 반환할 값을 만들고 이를 서버 캐싱에 저장한다
-
Request Memoization 에서는 서버에서 메모이제이션 된 값 function returns 각 통신요청을 실행하고 요청한 페이지에 필요한 요소를 반환한다 상태 업데이트를 위해 data cache에서 정보를 받아와 리렌더링 통해 새로운 페이지를 만들어 서버캐싱에 저장한다
-
data cache 에 캐싱데이타가 없거나 최신 정보를 요구하는 요청이 들어오면
원천 데이타에 접근하여 데이타를 캐시한다
Static and Dynamic Rendering 정적 , 동적 렌더링
정적 렌더링은 /blog/introduce 와 같이 요청 주소값이 고정 되 있는 페이지는 빌드시에 이미 페이지를 완성하여 캐시해놓았기 때문에 서버 캐시되어 있는 결과물을 불러와 빠르게 보여준다
동적렌더링 /blog/[id] 와 같이 유저의 요청의 의해 동적으로 렌더링 되야 하는 경우
full route cache 단계를 건너뛰고 페이지를 새로 만들어 반환받는다
반환 받은 값은 클라이언트 캐시에 저장되어 재요청시 캐싱된 결과물을 보여준다
정적 동적 모두 첫 통신 이후에는 클라이언트에 캐싱된다
정적페이지는 빌드시에 서버에서 캐싱 영역에 저장 된 페이지를 반환하여 보여주고
동적렌더링은 접근시 마다 서버에서 새로이 만들어 보내는 구조
client server cache 작동 방식
client 에서 sever로 처음 통신할때
/a 라는 경로로 접속 할때 layout 과 page를 요청하게 되면
layout 과 /a 경로 의 page를 캐싱하고 보여준다
/b 라는 경로로 접속하게 되면 이전에 /a 경로에 접속하여 얻어진
layout 은 이미 캐싱이 되었기 때문에 /b 라는 페이지만 partial hit(부분적 작용)하고 통합하여 보여주고 이를 client cache에 캐싱한다
즉 한번 통신한 컴포넌트 , 페이지는 별다른 요청이 없는한 재 구축없이 클라이언트 캐싱된 데이터로 빠르게 보여준다
Next 의 캐시 정책으로 인해 최신 데이타가 반영되지 않는 문제
const res = await fetch('https://.../item/1')
{ cache: 'force-cache' } // 이 옵션은 디폴트 옵션기본적인 통신의 경우엔 자동으로 메모 되어 캐시된다 이는 값이 업데이트 되더라도 최신데이타가 반영되지 않는 문제를 일으킨다
문제를 해결하기 위해 next의 확장된 fetch는 캐시 무력화 속성이 있다
fetch 데이타 캐시 무력화 속성 4가지
캐시무력화란 저장된 값을 이용하지 않는다는 것
변경된 데이타의 최신정보를 반영하기 위해 사용한다
- no-store
fetch('https://...', { cache: 'no-store' })
// Opt out of caching for all data requests in the route segment
export const dynamic = 'force-dynamic'모든 캐시 무력화
- revalidate timer
export const revalidate = 3600 // revalidate at most every hour
// 페이지 상위에 위치하면 자동 적용
or
fetch('https://...', { next: { revalidate: 3600 } })
// 통신 함수에 직접 입력시간 기반 재검증(Time-based Revalidation)
초 단위로 시간을 적용시켜 해당 시간이후 캐쉬가 초기화 되게끔
- revalidateTag
// Revalidate entries with a specific tag
revalidateTag('a')
// Cache data with a tag
fetch(`https://...`, { next: { tags: ['a', 'b', 'c'] } })
원하는 태그만 캐시를 무력화 하기
- revalidatePath
revalidatePath('/')경로에 따른 무력화
위 코드에서 무력화는 / 경로만 적용됨
/ 경로는 루트경로임으로 /about 경로는 적용이 되지 않음
일시적으로는 보여지지만 실제로 해당 페이지에선 반영이 안됨
