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

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

결론부터 말씀드리면 프리페칭시에는 프리페칭 대상 페이지가 동적인 페이지로 설정되어 있다면 클라이언트 컴포넌트가 존재한다고 하더라도 JS Bundle을 불러오지 않습니다.

따라서 /book/[id] 페이지(/book/1 포함)에 클라이언트 컴포넌트가 포함되어 있다고 하더라도 JS Bundle은 로딩되지 않습니다.

참고로 상호작용이 있다 없다를 판가름 하는 기준은 해당 페이지의 클라이언트 컴포넌트가 포함되어 있느냐 없느냐를 기준으로 판단한다는 점도 함께 기억해주시면 좋을 것 같습니다.

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

Next.js에서의 서버 컴포넌트와 RSC(Router Server Component)에 대한 개념 때문에 혼란스러우신 것 같습니다. 요청하신 내용을 바탕으로 설명드리겠습니다.

서버 컴포넌트 및 RSC와 JS 번들링

1. 서버 컴포넌트(RSC)

   • 기본적으로 서버 사이드에서 렌더링된 상태로 HTML을 클라이언트에 전달하고, 추가적인 JS 파일들은 필요하지 않습니다.
     
   • 상호작용이 없는 정적 콘텐츠에 적합하며, 이 경우 클라이언트로 보낼 JS 번들이 없습니다.
     

2. 클라이언트 사이드 상호작용

   • 만약 페이지에 상호작용이 있다면, 해당 상호작용을 지원하는 JS 번들이 필요합니다.
     
   • 상호작용이 있는 페이지는 클라이언트 컴포넌트를 필요로 하고, 이에 따라 JS 번들이 포함됩니다.
     

동적인 페이지에 대한 설명

• 동적인 페이지와 상호작용:

  • 동적 페이지란 주로 URL 파라미터에 따라 서로 다른 콘텐츠를 렌더링하는 페이지를 의미합니다.
    
  • 상호작용이 포함되지 않은 동적 페이지는 특정 데이터에 따라 서버 사이드에서만 HTML이 생성되고, 별도의 JS 번들이 내려가지 않습니다.
    

• 질문하신 ‘상호작용이 있는 페이지라도 동적인 페이지라면 RSC만?’:

  • 상호작용이 있으면 관련 JS번들이 필요하므로 RSC만 보내는 것이 아니라 클라이언트 컴포넌트와 관련된 JS 파일도 필요합니다. 그러나 상호작용이 없는 단순한 동적 페이지라면 RSC만 내려주게 됩니다.
    

관련 질문 및 답변 자료

다음 링크에서 비슷한 주제의 질문과 기존 답변을 확인하실 수 있습니다:

1. RSC 데이터 패칭 질문이 있습니다
   
2. 섹션2 1.2 페이지 이동 및 데이터페칭 관련 질문
   

이 링크들에서는 RSC에 대한 세부적인 동작 방식과 클라이언트에서의 데이터 처리를 더욱 상세히 다루고 있으니 참조 부탁드립니다.

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