인프런 커뮤니티 질문&답변
작성한 질문수
Pre Rendering 방식에서 페이지 이동 요청 시 동작 관련 질문 드립니다.
작성
·
99
1
[1.2) Next.js 사전렌더링 이해하기] 강의 15분 부근에서 "사전 렌더링에서 페이지 이동 요청 시 클라이언트 사이드 렌더링 방식과 동일하게 처리한다"는 내용을 보고 질문 드립니다.
강의를 따라가며
CSR에서의 JS Bundle은 서비스 전체 코드에 대한 번들
사전 렌더링에서의 JS Bundle은 해당 페이지에 대한 번들
라고 스스로 생각하여 페이지 이동 요청 시 웹 서버로부터 새 JS Bundle을 받을 줄 알았는데, 사전 렌더링에서도 JS Bundle은 서비스 전체 코드에 대한 번들인 것인지 궁금합니다.
만약 제가 이해한 것이 맞다면, 아래 답변에 대해서
마지막으로 현재 페이지에 필요한 자바스크립트 코드만 Hydration이 이루어지게 됩니다. 그 이유는 간단한데요 단순히 Hydration이라는 과정이 현재 브라우저에 렌더링된 페이지의 HTML과 JS를 연결하는 과정이기 때문입니다.
전체 JS Bundle에서 현재 페이지에 대한 JS를 실행하고, 컴포넌트 교체 및 수화가 일어난다고 생각하면 될까요?
답변 2
0
답변 감사합니다!
프리페칭을 통해 미리 JS Bundle을 불러오기 때문에 페이지 이동 시에는 CSR과 마찬가지로 브라우저가 해당 JS를 실행하여 컨텐츠를 렌더링하는 것이군요!
궁금했던 부분이 잘 해결되었어요. 리액트 강의부터 잘 듣고 있습니다! Next 강의도 잘 완강해 보도록 할게요👍👍
0
안녕하세요 이정환입니다.
예리한 질문 주셨네요 👀
엄밀히 말하자면 Next.js 에서 초기 접속시에 브라우저에게 전달되는 JS Bundle에는, 사실 모든 페이지의 JS가 포함되어 있지 않습니다. 대신 현재 접속 요청이 발생한 페이지의 JS 만 포함되어 있습니다.
정리하면 초기 접속시에 브라우저에게 현재 페이지에 해당하는 JS Bundle만을 전달한다고 보시면 되는데요, 이는 한번에 전송되는 JS Bundle의 용량을 최적화 하기 위함입니다.
여기까지 잘 이해 되셨다면 이제 이런 의문이 드실 수 있습니다.
"그럼 CSR 방식으로 페이지 전환이 어떻게 이루어지는거지?"
이는 Next.js의 추가 기능인 "프리페칭"을 통해 이루어집니다. 프리페칭이란 특정 페이지에 접속했을 때, 이 페이지에서 이동 가능한 모든 페이지의 JS Bundle을 미리 불러와놓는 기능입니다.
예를 들어 사용자가 인덱스 페이지에 접속했을 때, 인덱스 페이지에 각각 A페이지와 B페이지로 향하는 링크가 있다면 프리페칭이 동작하여 A, B 페이지의 JS Bundle을 미리 불러와 놓게 됩니다. 이 기능에 대해서는 우리 강의의 2.4) 프리페칭 챕터에서 아주 자세히 다루고 있으니 참고하시면 좋겠습니다 😃