초기 접속 요청시 js 번들러 질문!
이전의 사전 렌더링에서
이런식으로 동작한다고 이해하고 초기접속시
JS 번들러에 남은 컴포넌트를 담아서 준다고 이해했는데
여기서는 페이지 이동 요청시 JS 번들러가 오는데 헷갈립니다.
답변 1
0
안녕하세요 이정환입니다.
먼저 이후의 학습 과정을 위해 용어 정리부터 하겠습니다 😃
번들러(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 사전 렌더링 이해하기 챕터를 다시 수강하시면 도움이 될 것 같습니다! 혹시 궁금한 점 있으시면 답글 부탁드립니다.
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
22
2
next.js 프로젝트
0
28
1
Next.js + Tanstack Query BFF 구조 질문
0
29
2
Next.js 사전렌더링 이해하기 부분
0
34
2
모달 관련 질문
0
42
3
렌더링 관련 질문
0
80
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
65
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
75
2
npx prisma db push 시 에러가 뜹니다.
0
94
3
vercel 배포를 실패하였습니다.
0
101
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
57
2
getServerSideProps 함수와 SSR의 관계
0
78
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
61
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
117
2
일반적인 nextjs project architecture에 대하여..
0
90
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
74
2
배포 시 오류 발생
0
90
2
백엔드 서버 오류납니다.
0
83
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
93
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
107
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
63
2
빨간줄 설정
0
77
2
익스텐션 질문
0
61
1