상호작용이 있어도 동적인 페이지라면 RSC만 보내나요?

한 입 크기로 잘라먹는 Next.js(15+)

3.6) 네비게이팅

해결된 질문

작성

121

3.6 네비게이팅 18분 10초 관련해서 질문있습니다.

이전 서버 컴포넌트 강의에서는 상호작용이 없는 페이지는 JS가 없기 때문에 RSC로 HTML을 만들어 보내고, JS 번들은 보내지 않는다고 이해했습니다.

그래서 프로젝트상 /book1/1 페이지는 상호작용이 없는 페이지라 프리페칭 받아도 RSC Payload만 받는게 맞지 않나?라 생각했습니다. 그런데 /book/1 페이지가 동적인 페이지라서 JS 번들을 안 받는다고 말씀하셔서 좀 헷갈립니다.

즉, 말씀하시는 부분이 상호작용이 있는 페이지라도 동적인 페이지라면 RSC만 보내주신다는 말씀인가요??

답변 2

지식공유자

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

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

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

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

질문자

답변감사합니다!

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

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

서버 컴포넌트(RSC)
- 기본적으로 서버 사이드에서 렌더링된 상태로 HTML을 클라이언트에 전달하고, 추가적인 JS 파일들은 필요하지 않습니다.
- 상호작용이 없는 정적 콘텐츠에 적합하며, 이 경우 클라이언트로 보낼 JS 번들이 없습니다.
클라이언트 사이드 상호작용
- 만약 페이지에 상호작용이 있다면, 해당 상호작용을 지원하는 JS 번들이 필요합니다.
- 상호작용이 있는 페이지는 클라이언트 컴포넌트를 필요로 하고, 이에 따라 JS 번들이 포함됩니다.

동적인 페이지와 상호작용:
- 동적 페이지란 주로 URL 파라미터에 따라 서로 다른 콘텐츠를 렌더링하는 페이지를 의미합니다.
- 상호작용이 포함되지 않은 동적 페이지는 특정 데이터에 따라 서버 사이드에서만 HTML이 생성되고, 별도의 JS 번들이 내려가지 않습니다.
질문하신 ‘상호작용이 있는 페이지라도 동적인 페이지라면 RSC만?’:
- 상호작용이 있으면 관련 JS번들이 필요하므로 RSC만 보내는 것이 아니라 클라이언트 컴포넌트와 관련된 JS 파일도 필요합니다. 그러나 상호작용이 없는 단순한 동적 페이지라면 RSC만 내려주게 됩니다.

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