페이지 이동시 또는 새로고침시 사전랜더링 질문

Question

처음 배울 때에는 브라우저에 요청이 들어올 때 기본적으로 SSR 방식으로 사전 렌더링이 된 후, 하이드레이션 작용이 일어나 그 후 CSR 방식으로 작동된다고 알고 있습니다. 질문하기 쉽게 / 경로를 보여주는 컴포넌트를 Home, book/:id 경로를 보여주는 컴포넌트를 BookDetail 라고 표기하겠습니다. Home 컴포넌트에 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 하고, BookDetail 컴포넌트도 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 진행 할 수 있도록 둘다 설정해 놓았을 때, 처음 HOME 컴포넌트 접속시 getServerSideProps 메서드가 실행되고 BookDetail 로 이동시 getServerSideProps 도 메서드도 실행됩니다. getServerSideProps 메서드는 사전 랜더링 때 실행이 되는 걸로 알고 있는데, 기존에 Next.js 랜더링 방식은 사전 렌더링 후, 페이지 이동은 CSR 로 진행된다고 배웠습니다. 그렇다면 BookDetail 로 이동시 CSR 방식으로 랜더링 된다면 , BookDetail 의 getServerSideProps 메서드는 실행되지 않아야 하는게 아닌가요 ?

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 페이지 이동시의 동작을 자세히 묘사해드리지 않아 오해가 발생한 것 같네요..! 시간될 때 이 부분도 더 자세히 추가해 두겠습니다 😃 결론부터 말씀드리면 CSR 방식으로 페이지를 이동하면 이동한 페이지의 Props를 계산하기 위해 서버측에서 getServerSideProps를 실행해 JSON으로 그 결과만 보내주게 됩니다. 강의에서 소개해드린 "사전 렌더링"의 진행 순서는 모두 초기 접속 요청시에만 해당하는 것으로 향후의 페이지 이동에는 해당하지 않습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 픽셀소프트웨어님께서 궁금해하신 페이지 이동과 사전 렌더링 방식인 getServerSideProps 에 관련된 질문에 대해 유사한 사례를 참고해봤습니다. 여기에 대한 답변을 제공하는 데 도움을 줄 수 있는 기존 질문과 답변들을 소개합니다. 질문자님의 이해 확인 및 다음 단계를 이해하는데 도움이 되는 답변 : getServerSideProps 사용 시 이 답변에서는 getServerSideProps 가 실제로 어떻게 동작하는지, 그리고 페이지 간 이동 시 해당 함수가 어떻게 작동하는지에 대한 설명이 포함되어 있습니다. 특히 getServerSideProps 메서드는 페이지 이동 시 CSR로 전환되더라도 여전히 실행이 필요할 때 서버에서 처리됨을 이해하는 데 도움이 될 것입니다. 또한, 다른 유사한 질문들에서 얻은 주요 포인트는 다음과 같습니다: - SSR (서버 사이드 렌더링)와 CSR (클라이언트 사이드 렌더링)의 혼합 사용 : 페이지 이동 시에도 getServerSideProps 가 실행되는 이유는, 페이지에 필요한 데이터를 서버에서 미리 가져와야 하는 경우가 많기 때문입니다. 이는 새로운 페이지의 URL 입력 시나 페이지 갱신 시 특히 중요합니다. - 실시간 데이터 반영 : getServerSideProps 는 데이터를 매 요청마다 새로고침하여 항상 최신 상태를 유지합니다. 따라서 SSR로 초기 로드된 페이지가 CSR로 전환되더라도, 새 페이지로 이동할 때 서버에서 데이터를 다시 받아와야 합니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.