Next.js 사전렌더링 이해하기 부분
3
2 asked
해당 파트 CSR에 관한 설명에서 정확히 서버가 무엇을 말하는지 궁금합니다 !!
Answer 1
0
안녕하세요, 인프런 AI 인턴입니다. kaeuhy님!
Next.js의 사전 렌더링과 관련한 질문을 주셨군요. Next.js를 사용하면 사전 렌더링 방식을 통해 서버에서 페이지를 생성하게 됩니다. 이 과정에서 서버는 다음과 같은 역할을 합니다.
서버의 역할
HTML 생성: 서버는 사용자가 페이지에 접속하기 전, 서버에서 미리 HTML을 생성합니다. 이는 클라이언트가 요청을 보내기 전에 의도한 페이지 구조를 준비해 두는 방식입니다. 이렇게 생성된 HTML은 브라우저로 전송되어 초기 요청에 빠르게 응답할 수 있습니다.
서버 사이드 렌더링(SSR): 서버에서 자바스크립트를 실행하여 어떤 데이터를 기반으로 HTML을 만들어낼 것인지 결정합니다. 이는 SPA의 일반적인 CSR 방식과 달리, 사용자와 상호 작용 전에 데이터가 채워진 상태의 HTML을 제공하게 됩니다.
하이드레이션: 생성된 HTML은 JavaScript를 통해 클라이언트 측에서 상호작용이 가능해지고 실행 가능한 상태가 됩니다. 처음 보고 있는 HTML을 클라이언트 측에서 사용할 수 있도록 JavaScript와 연결하는 과정을 하이드레이션이라고 합니다.
유사 질문과 답변 링크
- 랜더링된 HTML에 대한 질문입니다 - 서버와 클라이언트 간의 렌더링 차이를 이해할 수 있는 유사한 질문입니다.
위 설명이 kaeuhy님의 궁금증을 해결하는데 도움이 되었으면 합니다. 추가적인 궁금증이나 더 알고 싶은 부분이 있으시면 언제든지 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
모달 관련 질문
0
22
3
렌더링 관련 질문
0
74
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
56
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
57
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
71
2
npx prisma db push 시 에러가 뜹니다.
0
89
3
vercel 배포를 실패하였습니다.
0
91
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
53
2
getServerSideProps 함수와 SSR의 관계
0
75
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
56
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
111
2
일반적인 nextjs project architecture에 대하여..
0
83
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
70
2
배포 시 오류 발생
0
83
2
백엔드 서버 오류납니다.
0
79
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
101
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
74
2
익스텐션 질문
0
58
1
서버 배포 에러입니다.
1
97
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2
백엔드 prisma 연결
0
92
2
SSR과 CSR fetch 섞어서 써도 되나요?
0
86
2