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

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

먼저 이후의 학습 과정을 위해 용어 정리부터 하겠습니다 😃

번들러(Bundler)란 번들(Bundle) 파일을 생성하는 도구를 말합니다. 번들 파일을 생성한다는 것은 자바스크립트 세상에서는 보통 빌드 과정을 의미하는데요 그렇기에 번들러라고 하면 보통은 Vite, Webpack 등의 빌드 및 번들링 도구를 말합니다.

강의에서 설명하는 JS 번들(Bundle)은 Vite나 Webpack 등의 번들러가 번들링(빌드) 과정을 수행한 이후 생성되는 결과물을 말합니다.

아마 강수영님께서 말씀하는 JS 번들러 -> JS 번들로 해석되는데요 이에 맞춰 답변드리자면

위 사전 렌더링 과정은 웹페이지에 초기 접속했을 때의 상황에 해당되고, 이후의 페이지 이동 과정은 초기 접속 이후에 Link나 버튼을 클릭해 페이지를 이동하는 상황에 해당됩니다.

강의의 사전렌더링 챕터에서 설명 드리고 있듯이 Next.js는 초기접속시에는 서버측에서 사전 렌더링 과정을 거쳐 완성된 HTML 파일과 JS Bundle을 전달하는 방식으로 웹 페이지를 제공하고

이후의 페이지 이동 과정에서는 새로운 HTML 파일 전달 없이, 새로운 페이지의 컴포넌트에 해당하는 JS Bundle만 전달하여 기존의 리액트 앱 처럼 CSR(클라이언트 사이드 렌더링)방식으로 이동합니다. 그리고 이를 통해 궁극적으로는 CSR의 느린 초기 접속이라는 단점은 해소하면서, 빠른 페이지 이동이라는 장점은 유지하게 됩니다.

요 내용에 대해 더 자세히 이해하시려면 1.2) Next.js 사전 렌더링 이해하기 챕터를 다시 수강하시면 도움이 될 것 같습니다! 혹시 궁금한 점 있으시면 답글 부탁드립니다.