사전 렌더링 과정에서 질문
안녕하세요! 강의 잘 보고있습니다!
사전렌더링시에 해당 페이지에 대한 HTML과 JS bundle을 받고 수화 과정을 통해 상호작용을 하는 건 이해를 하였습니다!
궁금한점은 그럼 해당 페이지가 아닌 다른 페이지의 HTML과 Js파일들은 프리페칭 과정에서 받아 CSR방식으로 동작하는건가요??
답변 2
0
안녕하세요 이정환입니다.
답변에 앞서 먼저 따뜻한 말씀 감사합니다 🙇♂
Next.js의 모든 페이지는 최초 접속시 사전 렌더링 방식으로 제공됩니다. 예를 들어 서비스에 /a, /b, /c 페이지가 있다고 가정하면 이 모든 페이지가 최초 접속시에는 다 사전 렌더링 방식으로 제공됩니다.
반면 최초 접속이 종료된 이후 페이지를 이동하는 상황에서는 다릅니다. 예를 들어 /a 페이지로 최초 접속을 마친 이후 /b 페이지로 링크를 클릭해 이동하는 상황에서는 CSR 방식으로 페이지를 이동하게 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. chahoon12343님.
사전 렌더링과 페이지 프리페칭에 관련된 질문에 대해 답변드리겠습니다.
사전 렌더링과 수화
사전 렌더링은 서버가 HTML과 관련된 데이터를 미리 생성하여 클라이언트에 보내 최종 사용자에게 빠르게 초기 화면을 보여주는 방식입니다. 여기서 수화(Hydration) 과정은 이미 렌더링된 HTML과 웹 애플리케이션의 인터랙티브 동작을 연결하는 과정입니다.
프리페칭과 CSR
프리페칭은 네트워크 상태가 좋을 때 브라우저가 사용자가 클릭할 가능성이 높은 링크에 대해 JS 파일을 미리 요청하는 과정입니다. 이렇게 함으로써 페이지 전환 시 네트워크 지연이 줄어들고, 사용자에게 더 빠르고 매끄러운 페이지 전환 경험을 제공합니다. 프리페칭된 자바스크립트 파일은 CSR 방식을 통해 동작하여 클라이언트에서 페이지 전환 시 새로운 데이터를 요청하지 않고 더욱 빠르게 로드됩니다.
관련 내용을 더 자세히 이해하고자 하신다면 다음의 유사한 질문과 답변을 참고하시기 바랍니다:
이 자료들은 여러분이 사전 렌더링 방식과 클라이언트 측 페이지 전환의 작동 방식에 대한 이해를 깊게 하는 데 유용한 정보를 제공할 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
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