인프런 커뮤니티 질문&답변
작성한 질문수
Next.js 사전 렌더링 질문
해결된 질문
작성
·
147
·
수정됨
1
안녕하세요 궁금한 것이 있습니다.
Next.js 사전 렌더링 설명에서
유저가 접속 요청을 보낸다고 하면 서버에서 JS를 실행하여 렌더링 된 HTML을 보내게 되고 클라이언트에서 화면에 렌더링을 하고,
후속으로 JS 번들 파일을 보내게 되고 여기서 중요한 점은 CSR과 같이 모든 JS 파일을 번들링 해서 보낸다..??
이후 페이지 이동 시 JS 파일이 있기 때문에 서버에 요청을 하지 않고 CSR 방식으로 흘러간다 라고 설명을 해주셨습니다.
여기서 궁금한게 있습니다.
초기 접속 시 JS 번들링 파일을 CSR과 같이 모든 JS를 보내는건지,,? 아니면 해당 접속 페이지에 해당하는 JS를 본내는 건지가 궁금합니다.
검색해보니 Next.js 초기 접속 시 해당 페이지 JS만 번들링 해서 보낸다는 얘기가 있어 헷갈렸습니다.
답변 2
0
안녕하세요 이정환입니다.
모든 페이지에 해당하는 JS Bundle을 보내지는 않습니다. 이럴 경우 이후 페이지 이동 필요시 새로운 JS Bundle을 또 불러와야 하는 문제가 생기는게 아닌가 의문이 드실 수 있는데요 이를 Next.js는 프리페칭이라는 기능을 통해 또 한번 해결하고 있습니다. 이에 대해서는 이후 챕터에서 설명드리고 있으니 참고하시는걸 추천드립니다!
0
안녕하세요, 인프런 AI 인턴입니다. 구름e님!
Next.js의 사전 렌더링과 관련하여 궁금해 하시는 부분에 대해 답변 드리겠습니다.
1. 초기 접속 시 JS 번들링 방식
Next.js에서는 초기 접속 시 모든 JS 파일을 번들링하여 보내지는 않습니다. 대신, 현재 접속한 페이지와 필요한 최소한의 JS 파일만 번들링하여 브라우저로 전송합니다. 이는 초기 로딩 속도를 개선하고, 사용자 경험을 최적화하기 위함입니다. 즉, CSR 방식과 달리 Next.js는 페이지별로 필요한 자바스크립트 번들만 전송하여, 불필요한 리소스를 전송하지 않습니다. 이는 Pre Rendering 방식에서 페이지 이동 요청 시 동작 관련 질문에서도 언급된 부분이니 참조하시면 더 도움이 될 것입니다.
2. 페이지 이동 시의 JS 번들링
CSR 방식으로 전환된 이후에는, 이미 프리페칭을 통해 특정 페이지에서 이동 가능한 다른 페이지의 JS 파일을 미리 로드해 놓습니다. 따라서, 브라우저는 서버에 추가적인 JS 요청 없이 해당 파일을 실행하여 페이지 전환을 수행할 수 있습니다.
이 과정은 Next.js의 프리페칭 메커니즘 덕분이며, 추가적인 정보는 SSG와 CSR 방식의 페이지 전환 관련 질문에서 얻으실 수 있습니다.
위의 답변들이 구름e님의 질문에 대한 명확한 설명이 되길 바랍니다. 더 궁금한 점이 있으시면 언제든지 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다. !