페이지 라우터의 단점을 보완할 방법

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

2.21) 페이지 라우터 정리

해결된 질문

작성

수정됨

안녕하세요. 강의에서 설명해주신 페이지 라우터의 단점 중
"불필요한 컴포넌트들도 JS 번들에 포함된다"는 내용에 대해 질문드리고 싶습니다.

제가 이해한 바로는, 초기 HTML은 사전 렌더링 시 모든 컴포넌트를 포함하여 만들어지되,
실제로 브라우저에서 하이드레이션(클라이언트 측 React 활성화)이 일어나는 컴포넌트는
상호작용이 필요한 컴포넌트나 CSR 방식으로 처리된 컴포넌트에 한정되어
이들만 JS 번들에 포함되는 것으로 생각했습니다.

즉, 단순히 정적인 컴포넌트는 HTML로만 렌더링되고,
JS 번들에는 포함되지 않거나 최소화된다고 이해했는데,
혹시 이 부분에서 제가 잘못 이해하고 있는 걸까요?

초기 렌더링 시 어떤 요소들이 HTML로 렌더링되고,
어떤 컴포넌트들이 JS 번들에 포함되는지 기준을 설명해주시면 감사하겠습니다.

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

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

"실제 브라우저에서 하이드레이션이 일어나는 컴포넌트는 상호작용이 필요한 컴포넌트나 CSR 방식으로 처리된 컴포넌트에 한정해서 일어난다" -> 아닙니다. 강의에서 말씀드렸듯 그냥 단순하게 모든 컴포넌트가 다 하이드레이션됩니다. 이로 인해 불필요한 컴포넌트들까지 JS Bundle로 전달되는 문제가 발생하는 것 입니다.

인프런 AI 인턴

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

React와 Next.js의 초기 렌더링 및 하이드레이션 과정에 대한 질문을 주셨네요. 실제로 이에 관한 지식은 코드 최적화에 큰 도움을 주기 때문에 중요합니다.

Next.js의 페이지 라우터 및 번들링 메커니즘

사전 렌더링(Pre-rendering):
- Next.js는 서버 측에서 사전에 HTML을 렌더링합니다. 이 HTML은 사용자가 페이지를 처음 요청했을 때 브라우저에서 빠르게 렌더링되게 합니다.
- 주의해야 할 점은, 이 HTML에는 함께 사전 렌더링된 정적인 콘텐츠가 포함되어 있고, 이는 사용자 인터랙션 없이도 화면에 표시됩니다.
브라우저에서의 하이드레이션:
- 하이드레이션은 정적인 HTML을 React 컴포넌트와 연결하는 과정입니다. 이를 통해 페이지는 인터랙티브해집니다.
- CSR(Client-Side Rendering) 컴포넌트나 사용자의 입력/인터랙션이 필요한 컴포넌트들은 이 과정에서 JavaScript 번들로 받아 작동하게 됩니다.
JavaScript 번들 최적화:
- React Server Components: 이 새로운 개념을 도입하면, 상호작용이 필요하지 않는 정적 컴포넌트는 서버 측에서만 렌더링되고 브라우저로 전송되지 않습니다. 이는 불필요한 JS 번들 사이즈를 줄이는 데 큰 역할을 합니다.
- 최소 JavaScript 포함: 브라우저는 필요한 부분만 하이드레이션을 통해 활성화하고, 나머지 정적 요소는 계속해서 서버에서 렌더링된 HTML을 사용합니다.

이러한 개념을 보다 자세히 이해하기 위해, 이미 강의에서 다음과 같은 주제를 다룬 적이 있습니다. 유사한 답변과 설명이 포함된 게시물을 아래 링크에서 찾아보실 수 있습니다:

React Server Component 와 Pre Fetching: 프리페칭 및 서버 컴포넌트와 클라이언트 컴포넌트 간의 번들링 전략에 대한 심도 있는 설명이 있습니다.
Next.js 사전 렌더링에 대해서 더 궁금한 부분이 있습니다.: 사전 렌더링 및 하이드레이션의 세부 메커니즘을 이해하는 데 도움이 됩니다.

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

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

페이지 라우터의 단점을 보완할 방법

Next.js의 페이지 라우터 및 번들링 메커니즘