인프런 커뮤니티 질문&답변
작성한 질문수
페이지 이동시 또는 새로고침시 사전랜더링 질문
24.09.24 08:43 작성
·
50
2
처음 배울 때에는 브라우저에 요청이 들어올 때 기본적으로 SSR 방식으로 사전 렌더링이 된 후, 하이드레이션 작용이 일어나 그 후 CSR 방식으로 작동된다고 알고 있습니다.
질문하기 쉽게 / 경로를 보여주는 컴포넌트를 Home, book/:id 경로를 보여주는 컴포넌트를 BookDetail 라고 표기하겠습니다.
Home 컴포넌트에
getServerSideProps메서드로 사전 렌더링때 데이터 페칭을 하고, BookDetail 컴포넌트도getServerSideProps메서드로 사전 렌더링때 데이터 페칭을 진행 할 수 있도록 둘다 설정해 놓았을 때,
처음 HOME 컴포넌트 접속시getServerSideProps메서드가 실행되고 BookDetail 로 이동시getServerSideProps도 메서드도 실행됩니다.getServerSideProps메서드는 사전 랜더링 때 실행이 되는 걸로 알고 있는데,
기존에 Next.js 랜더링 방식은 사전 렌더링 후, 페이지 이동은 CSR 로 진행된다고 배웠습니다.
그렇다면 BookDetail 로 이동시 CSR 방식으로 랜더링 된다면, BookDetail 의getServerSideProps메서드는 실행되지 않아야 하는게 아닌가요 ?
답변 2
0
2024. 09. 24. 12:02
안녕하세요 이정환입니다.
페이지 이동시의 동작을 자세히 묘사해드리지 않아 오해가 발생한 것 같네요..!
시간될 때 이 부분도 더 자세히 추가해 두겠습니다 😃
결론부터 말씀드리면 CSR 방식으로 페이지를 이동하면 이동한 페이지의 Props를 계산하기 위해 서버측에서 getServerSideProps를 실행해 JSON으로 그 결과만 보내주게 됩니다.
강의에서 소개해드린 "사전 렌더링"의 진행 순서는 모두 초기 접속 요청시에만 해당하는 것으로 향후의 페이지 이동에는 해당하지 않습니다.
0
2024. 09. 24. 08:46
안녕하세요, 인프런 AI 인턴입니다.
픽셀소프트웨어님께서 궁금해하신 페이지 이동과 사전 렌더링 방식인 getServerSideProps에 관련된 질문에 대해 유사한 사례를 참고해봤습니다. 여기에 대한 답변을 제공하는 데 도움을 줄 수 있는 기존 질문과 답변들을 소개합니다.
- 질문자님의 이해 확인 및 다음 단계를 이해하는데 도움이 되는 답변:
이 답변에서는 getServerSideProps가 실제로 어떻게 동작하는지, 그리고 페이지 간 이동 시 해당 함수가 어떻게 작동하는지에 대한 설명이 포함되어 있습니다. 특히 getServerSideProps 메서드는 페이지 이동 시 CSR로 전환되더라도 여전히 실행이 필요할 때 서버에서 처리됨을 이해하는 데 도움이 될 것입니다.
또한, 다른 유사한 질문들에서 얻은 주요 포인트는 다음과 같습니다:
- SSR (서버 사이드 렌더링)와 CSR (클라이언트 사이드 렌더링)의 혼합 사용: 페이지 이동 시에도 getServerSideProps가 실행되는 이유는, 페이지에 필요한 데이터를 서버에서 미리 가져와야 하는 경우가 많기 때문입니다. 이는 새로운 페이지의 URL 입력 시나 페이지 갱신 시 특히 중요합니다.
- 실시간 데이터 반영: getServerSideProps는 데이터를 매 요청마다 새로고침하여 항상 최신 상태를 유지합니다. 따라서 SSR로 초기 로드된 페이지가 CSR로 전환되더라도, 새 페이지로 이동할 때 서버에서 데이터를 다시 받아와야 합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.