인프런 커뮤니티 질문&답변
작성한 질문수
클라이언트 라우터 캐시에 레이아웃 말고 JS Bundle은 캐싱이 안될까요?
해결된 질문
작성
·
18
0
안녕하세요!
클라이언트 라우터 캐시 기능에 대해 궁금증이 있어서 질문합니다.
클라이언트 라우터 캐시에 공통적으로 쓰이고 변하지 않는? 레이아웃들을 캐싱한다고 이해했습니다.
제가 궁금한 것은 RSC Payload는 수시로 바뀔 수 있을 것 같아 라우터 캐시에 저장하기 어렵겠지만,
JS Bundle은 클라이언트 컴포넌트들로 구성되어 있다면 변하지 않으므로 캐싱해도 되지 않을까 생각을 해봤습니다.
답변 2
0
안녕하세요 이정환입니다.
네 클라이언트 라우터 캐시에는 강의에서 말씀드린대로 RSC Payload만 캐싱할 뿐, JS Bundle은 캐싱되지 않습니다. 이때 말씀하신대로 RSC Payload가 수시로 바뀔 수 있기 때문에 클라이언트 라우터 캐시 역시 강의에서 안내드린대로 네비게이션 도중에만 사용됩니다.
JS Bundle의 경우에는 자바스크립트이기 때문에 한번 불러오면 다시 불러올 필요가 없습니다. 따라서 브라우저가 자체적으로 추가적인 JS Bundle을 불러오지 않는 방식으로 별도의 캐싱이 적용됩니다!
0
안녕하세요, 인프런 AI 인턴입니다. qjatjs123123님, 클라이언트 라우터 캐시와 JS Bundle에 관한 질문을 주셔서 감사합니다.
클라이언트 라우터 캐시와 JS Bundle
Next.js의 클라이언트 라우터 캐시는 주로 서버 사이드 렌더링된 React Server Components(RSC)의 페이로드를 일시적으로 저장하여 페이지 이동 시 성능을 최적화하는 데 사용됩니다. 반면에, JS Bundle은 클라이언트 컴포넌트가 포함된 JavaScript 코드로, 한 번 다운로드 받고 나면 변경되지 않기 때문에 해당 JS Bundle 자체는 브라우저의 HTTP 캐시를 통해 관리됩니다.
RSC Payload와 JS Bundle 차이
RSC Payload: 이는 서버 컴포넌트의 실행 결과를 클라이언트에게 전달하기 위한 데이터로, 사용자의 요청이나 서버 상태에 따라 즉각적으로 변경될 수 있습니다. 이러한 특성 때문에 일반적인 클라이언트 라우터 캐싱이 어렵습니다.
JS Bundle: 클라이언트 컴포넌트의 코드로, 빌드 시 정적 리소스로 생성되며, 브라우저의 HTTP 캐시에 의해 자동적으로 캐싱되어 이후에 변경이 없다면 재다운로드가 필요 없습니다. 이러한 면에서 일단 한 번 불러온 JS Bundle은 브라우저가 알아서 캐싱하여 재사용합니다.
관련하여 더 알아보시려면 다음 링크에서 유사한 주제를 논의한 답변을 확인하시면 도움이 될 것입니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
엇.. 놓쳤나 봅니다
답변 감사합니다!