사전 렌더링, SSR 질문
사전렌더링에서 설명해주신 저 일련의 과정들이 SSR, ISR, SSG 모두 공통적으로 동일하게 해당하나요?
답변 1
0
안녕하세요 방황하는 물고기님 이정환입니다.
말씀하신 "일련의 과정"이 HTML 생성 및 전달, JS Bundle 전달, Hydration 과정을 의미하시는 거겠죠? 그렇다면 맞습니다.
SSR, SSG, ISR 모두 사전 렌더링의 개별 유형으로써 위 과정들을 모두 동일하게 진행합니다. 그러나 타이밍이 조금씩 다르다고 생각하시면 될 것 같아요
일례로 SSR의 경우 서버측에서 HTML을 생성하는 과정이 매 요청이 들어올 때 마다 발생하지만 SSG의 경우 빌드타임에 미리 HTML을 생성해 놓게 됩니다. 또 ISR의 경우에는 이런 SSG의 특징에 더해 특정 시간을 주기로 HTML을 재 생성 하기까지 합니다.
0
SSR에서 매 요청마다 HTML을 생성한다면, Hydration과정도 매 요청마다 발생하는걸까요?
그리고 JS Bundle을 서버에서 받아오는 경우는 딱 1번만 이루어지는걸까요?
1
네 초기 접속 과정을 계속 수행한다면 매 요청마다 발생합니다. 그러니까 새로고침을 계속 누르면 매번 HTML 생성부터 하이드레이션까지 발생하게 된다는 것이죠, JS Bundle을 받아오는 과정 또한 역시 매 초기 접속 요청마다 수행됩니다.
그러나 오해하시면 안되는 점이 클라이언트 사이드에서 페이지를 이동할 경우 즉 Link 컴포넌트나 useRouter를 통한 페이지 이동을 수행한 경우 이때에는 CSR 방식으로 페이지가 이동됩니다. 이 내용은 향후 챕터에서 다루니 참고 부탁드립니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
55
2
@/styles/globals.css'
0
51
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
88
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
96
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
107
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
112
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1