Pre Rendering 방식에서 페이지 이동 요청 시 동작 관련 질문 드립니다.
163
작성한 질문수 3
[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) 프리페칭 챕터에서 아주 자세히 다루고 있으니 참고하시면 좋겠습니다 😃
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
23
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