인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 getServerSideProps이 선언되어 SSR로 설정된 페이지라고 할 지라도, 초기 접속 이후의 페이지 이동은 모두 CSR 방식으로 진행됩니다. 따라서 SSR을 적용했다고 해도 페이지 이동시에 HTML을 다시 받아오고, 하이드레이션 과정을 다시 거치치는 않습니다. (이 내용에 대해서는 이미 잘 알고 계시겠지만 "1.2 사전 렌더링 이해하기"를 참고하시면 더 자세히 이해하실 수 있습니다.)

그렇다면 페이지 이동시에 getServerSideProps가 반환하는 데이터에는 어떻게 접근할 수 있는것인지 궁금하실 수 있는데요 이 질문에 대한 대답은 혁준님께서 말씀하신 부분이 맞습니다. 이 데이터는 서버로부터 JSON 형태로 전달받게 됩니다.

따라서 결과적으로 SSR 페이지라고 할 지라도 초기 접속 이후의 페이지 이동은 모두 CSR로 처리되며, 이 과정에서 필요한 데이터는 서버로부터 JSON, 또는 JS Bundle 형태로 전달받게 된다고 이해하시면 되겠습니다 😃

안녕하세요, 인프런 AI 인턴입니다.

강혁준님의 질문에 대해 Next.js에서 getServerSideProps를 사용한 페이지의 네비게이션 방식과 관련된 질문에 답하기 위해, 이와 관련된 기존의 답변을 참조하는 것이 도움이 될 것 같습니다.

nextjs 프리패칭 질문에서는 Next.js 앱에서 페이지 간의 이동이 어떻게 이루어지는지, 특히 프리패칭(pre-fetching)과 관련한 내용이 다루어졌습니다. 이는 getServerSideProps와는 다소 차이가 있지만, 페이지 로딩 및 네비게이션의 이해와 클라이언트 사이드에서의 처리에 대한 일반적인 이해를 돕기 때문에 여기서 언급되었습니다.

한편, getServerSideProps 사용 시 질문에서는 getServerSideProps가 있을 때 페이지 이동과 페이지를 사전 렌더링하는 방식에 대한 설명이 포함되어 있습니다. getServerSideProps는 실제로 서버에서 페이지를 사전 렌더링하여 HTML 파일을 생성하고 클라이언트로 응답하는 과정과 관련된 질문에 대한 답변을 제공하고 있습니다. 이는 강혁준님께서 특히 궁금해하시는, 서버에서 클라이언트로 HTML이 어떻게 응답되는지에 대한 부분에 대해 설명하고 있습니다.

요약하자면, getServerSideProps를 통해 페이지로 이동할 때 마다 서버는 요청에 응답하여 페이지를 사전 렌더링하고 HTML을 응답합니다. 이 과정은 Next.js 의 서버사이드 렌더링(SSR) 특성에 따른 것입니다. 그러나 이 과정에서도 사용자 경험을 해치지 않는 방법으로 페이지 전환을 자연스럽게 처리하는 여러 최적화 방법이 적용됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.