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

안녕하세요 이정환입니다. 순서대로 답변드릴게요

1) 사전 렌더링 된 HTML과 서버 컴포넌트만의 실행 결과물인 RSC Payload를 브라우저에 함께 보내주게 됩니다. 이 결과 브라우저는 서버로부터 받은 HTML을 화면에 렌더링 합니다.

여기서 하이드레이션은 서버 컴포넌트에는 해당되지 않는 이야기 입니다. 강의의 서버 컴포넌트 이해하기 챕터에서 말씀드리고 있듯이 하이드레이션이란 브라우저가 Next.js 서버로부터 클라이언트 컴포넌트들의 코드가 묶여있는 JS Bundle을 전달 받았을 때 이를 실행하여 HTML과 JS를 연결하는 과정입니다. 쉽게 말하자면 클라이언트 컴포넌트들의 코드를 브라우저에서 동작시키는 과정이라는 것이죠

그렇다면 클라이언트 컴포넌트는 두번 실행되는것 아닌가? 궁금하실 수 있는데 맞습니다. 이 내용 역시 우리 강의의 서버 컴포넌트 주의사항 챕터에서 자세히 소개 해 드리고 있으니 해당 챕터를 참고하시면 도움이 될 것 같습니다.

2) 네 맞습니다.

안녕하세요, 인프런 AI 인턴입니다. gayeongx0916님께서 Next.js의 서버 컴포넌트 렌더링 과정과 관련하여 혼란스러운 부분에 대해 질문하신 것을 확인했습니다. 해당 주제와 관련하여 도움을 드리겠습니다.

서버 컴포넌트의 렌더링 과정

1. 서버 컴포넌트 초기 접속 시:

   • Next.js에서 서버 컴포넌트의 초기 접속 시 서버에서 HTML을 사전 렌더링하여 클라이언트에 전달합니다. 이 과정에서 RSC Payload는 서버-클라이언트 간의 상태를 동기화하고, 컴포넌트 트리를 유지하기 위해 사용됩니다.
     
   • 하이드레이션은 사전 렌더링된 HTML을 클라이언트 측에서 실행 가능한 React 컴포넌트로 변환하는 과정입니다. 이는 렌더링을 두 번 하는 것은 아니며, 사전 렌더링된 콘텐츠를 갖고 인터랙티브한 기능을 추가하는 것으로 이해하면 좋습니다.
     

2. 링크를 통한 서버 컴포넌트 이동:

   • Next.js의 Link 컴포넌트를 통해 페이지를 이동하게 되면 기본적으로 CSR(Client-Side Rendering) 방식에 의해 동작하게 됩니다.
     
   • prefetch 기능을 통해 사전에 로딩된 RSC Payload가 사용되어, 클라이언트는 필요한 데이터를 미리 로드하여 빠르게 UI를 구성합니다. 이는 전체 페이지가 새로고침되는 것을 방지하고, 더 나은 사용자 경험을 제공합니다.
     

유사 질문과 답변 링크

• RSC 데이터 패칭 질문이있습니다 - Next.js의 데이터 패칭과 RSC Payload 개념에 대해 더 깊이 이해할 수 있는 유사한 질문과 답변을 확인할 수 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.