인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

원피스 팬이신가봐요! 저도 완전 팬입니다 😃 언제 완결나나 기다리고 있어요 ㅋㅋ!

답변을 드리자면 우선 JS Bundle과 RSC Payload의 차이에 대해 말씀드려야 할 것 같아요 일단 RSC Payload는 서버 컴포넌트의 실행 결과 그리고 JS Bundle은 클라이언트 컴포넌트의 자바스크립트 코드라는 점은 알고 계실텐데요

RSC Payload는 서버 측의 실행결과(또는 데이터 페칭의 결과)에 따라 언제든 결과값이 변경될 수 있겠지만 이와 달리 JS Bundle은 Next.js 앱을 새롭게 빌드하지 않는다면 변경될 일이 없어요

왜냐면 JS Bundle은 앞서 말씀드린대로 우리가 직접 작성해둔 자바스크립트 코드들을 묶어놓은 것 뿐이기 때문이죠 따라서 브라우저 입장에서도 이미 한번 불러온 JS Bundle을 다시 불러오는건 불필요한 동작이에요 어짜피 변화할 일이 없는데 굳이 다시 불러올 이유가 없죠 이미 한번 불러온 JS Bundle은 그대로 브라우저에 저장되어 리액트 앱으로써 쭉 활용돼요

그러나 앞서 말씀드린대로 RSC Payload는 호출 시점에 따라 결과값이 다를 수 있어요 그러므로 원칙적으로는 페이지를 이동하거나 다시 요청할 때 마다 새롭게 불러와야 해요

결론적으로 정리하자면 RSC Payload는 요청이 들어올 때 마다 실시간으로 생성해 반환하는게 원칙이지만 JS Bundle은 그렇지 않다는 점을 먼저 이해해주시면 좋을 것 같아요

자 그럼 이제 클라이언트 라우터 캐시에 대해 이야기 해볼게요 클라이언트 라우터 캐시의 주된 목적은 레이아웃 컴포넌트의 RSC Payload를 일정 시간동안 캐싱해두는데에 있어요 일반적으로 레이아웃 컴포넌트들은 서버컴포넌트이므로 실행할때 마다 결과값이 변화할 수 있긴 하지만 그렇다고 매분 매초 변경이 이루어지지는 않죠! 그렇기 때문에 어느정도 시간간격을 두고 불러올 수 있도록 클라이언트 라우터 캐시가 제공된다고 생각해주시면 좋을 것 같아요!

안녕하세요, 인프런 AI 인턴입니다.

원피스를 찾아서님, Next.js에서 클라이언트 라우팅과 Cache 관리에 관한 질문을 주셔서 감사합니다. 관련해서 유사한 질문과 답변들이 있었습니다. 그 중 일부를 참고하시면 도움이 될 것 같습니다.

관련 질문

1. 클라이언트 컴포넌트가 서버에서 어떻게 렌더링되는지 궁금합니다!
   

요약 설명

Next.js에서 클라이언트 컴포넌트는 기본적으로 클라이언트 사이드에서만 작동하도록 설계되어 있습니다. 따라서 클라이언트 컴포넌트가 포함된 layout.tsx 파일이 있을 때, 이 클라이언트 컴포넌트는 브라우저에서 JavaScript 번들로 로드됩니다. 서버로부터 다시 해당 컴포넌트의 JS 번들을 요청해 와야합니다.

React Server Components(RSC)는 사전 렌더링된 HTML을 통해 서버에서 전달되고, 클라이언트 컴포넌트는 해당하는 JS 번들이 브라우저로 로드될 때까지 대기한 후 Hydration 과정에서 완전한 인터렉션 기능을 갖추게 됩니다.

중요 사항: 클라이언트 라우트 캐시는 서버에서 내려받은 RSC 페이로드를 클라이언트 컴포넌트의 React 코드(JS Bundle)와 함께 저장 및 관리하는 것이 일반적입니다. 이것은 페이지 이동 시 성능을 향상시키기 위한 방법 중 하나입니다.

저는 질문자님의 이해를 돕고자 여러분들이 남긴 기존 답변을 참고하였습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.