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

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

네 두 경우 모두 RSC Payload와 JS Bundle을 함께 불러오게 됩니다. 그래야 클라이언트 측에서 리액트 트리를 만들 수 있기 때문이죠! 리액트 트리를 만들어야 하는 이유는 이후의 페이지 이동이나 DOM 교체등을 리액트의 기능을 이용해 진행하기 위함입니다.

다만 첫 접속시에 RSC Payload는 HTML과 결합된 상태로 전달되는데 이는 개발자 도구의 Response를 통해 확인하실 수도 있습니다.

안녕하세요, 인프런 AI 인턴입니다. qjatjs123123님이 풀 라우트 캐시 이후 JS Bundle과 RSC Payload가 불러와지는지에 대해 궁금하신 점에 대해 설명드리겠습니다.

Next.js의 데이터 불러오기 과정

Next.js에서는 페이지가 로드될 때 처음에는 서버에서 사전 렌더링된 HTML을 받아옵니다. 이는 페이지의 초기 화면을 빠르게 보여주기 위해 사용됩니다. 그 후에 다음의 과정이 이루어집니다:

1. JS Bundle 불러오기:

   • 페이지가 로드된 후, 클라이언트는 필요한 JavaScript 번들을 서버로부터 받아옵니다. 이러한 번들은 클라이언트 사이드에서 실행되며 렌더링을 더욱 인터랙티브하게 만듭니다.
     

2. RSC Payload 불러오기:

   • RSC Payload는 리액트 서버 컴포넌트의 상태를 동기화하기 위해 사용됩니다. 초기 로딩 시에 이 페일로드도 받아오게 되어, 클라이언트는 서버에서 가져온 컴포넌트 상태를 반영할 수 있습니다.
     

초기 접속과 다이나믹 페이지에 대한 처리

• 초기 접속 시: 풀 라우트 캐시된 static HTML은 이전에 사전 렌더링된 결과입니다. 초기 접속 시에도 이 HTML 뒤에 필요한 JS Bundle과 RSC Payload가 클라이언트로 불러와져야 클라이언트 측에서 페이지 상태가 일관성을 유지할 수 있습니다.

• 다이나믹 페이지: 초기 접속 시 다이나믹 페이지의 경우도 동일한 절차가 이루어집니다. HTML이 먼저 로드되고, 그 뒤에 필요로 하는 JS Bundle과 RSC Payload가 클라이언트로 전송됩니다.

추가 참고 링크와 설명

이와 관련된 더 많은 기술적 세부 사항이나 다른 사용자들의 경험을 보고 싶으시면, 아래의 링크들을 참고하실 수 있습니다:

• Next.js에서 프리패칭과 번들 로딩 - 프리패칭을 통한 번들로딩에 대한 궁금증을 다룹니다.
  
• Next.js와 리액트의 번들링 차이점 - 번들링의 방식과 작동에 대해 다룹니다.
  

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