Next.js SSR 방식에 대해 질문 드립니다.

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

2.3) 네비게이팅

해결된 질문

작성

안녕하세요 강의 잘 듣고 있습니다.
SSR 의 동작방식에 대해 문의 드립니다.

1) 프로젝트에 초기 접속할때는 '/' 페이지에 대한 HTML 반환 후 js bundle 반환 => 하이드레이션
2) '/search' 로 이동하면 '/search' 페이지에 대한 HTML 반환 후 캐싱된 js bundle 과 결합하여 하이드레이션

저는 대충 위 과정으로 이해하고 있었는데, 페이지에 따라 js bundle을 추가로 요청하는 경우도 있다고 해서 헷갈리는 것 같습니다.

초기 접속과 이후 새로운 페이지를 요청할때 HTML 응답과 js bundle 응답이 어떤식으로 동작하는지 설명 부탁 드립니다!

next.js ssr

답변 2

이정환 Winterlood

지식공유자

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

강의의 "사전렌더링" 챕터에서 말씀드렸듯 사전 렌더링 방식에서 초기 접속 이후의 페이지 이동은 CSR 방식으로 이루어집니다. 즉 페이지 이동은 리액트와 동일한 방식으로 이루어진다는 거죠

그렇기 때문에 질문주신 예시에서 인덱스 페이지에 접속한 이후 서치페이지로 이동할때 HTML을 서버로부터 불러오지 않습니다. 이것은 CSR이 아니기 때문입니다. 대신 초기 접속 과정에서 서버로부터 받아온 JS bundle을 실행하여 서치페이지에 알맞게 컴포넌트를 브라우저에서 자체적으로 교체하는 방식으로 페이지가 이동됩니다.

인프런 AI 인턴

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

Next.js의 SSR 동작 방식에 대한 이해에 도움을 드리겠습니다.

SSR(서버 사이드 렌더링) 동작 방식

초기 접속 시:
- 사용자가 애플리케이션에 처음 접속하면 서버는 클라이언트에게 요청된 페이지의 HTML을 생성하여 반환합니다.
- 생성된 HTML은 브라우저에서 화면에 렌더링됩니다. 이 시점에서는 아직 JavaScript가 동작하기 전이라 상호작용이 제한될 수 있습니다.
- 서버에서 JavaScript 번들은 별도로 클라이언트에게 전송되어, 이후 하이드레이션(hydration) 과정을 통해 HTML과 결합하여 상호작용 가능한 페이지로 전환됩니다.
페이지 이동 시:
- 사용자가 다른 경로 ‘/search’ 등을 요청하게 되면, Next.js는 해당 페이지에 필요한 데이터를 서버에서 가져와 새로운 HTML을 생성하여 반환합니다.
- 대부분의 경우 이미 기존에 다운로드된 JavaScript 번들에서 필요한 부분을 이용합니다. 그러나 새롭게 필요한 컴포넌트나 스크립트가 있을 경우 해당 부분만 추가로 요청하여 다운로드합니다.
- 이는 페이지 간의 빠른 이동을 가능하게 하려는 Next.js의 효율적인 번들링 전략 때문입니다.

페이지 별 번들 추가 요청

페이지에 따라 JavaScript 번들을 추가로 요청하는 것은, 초기 로딩 시 모든 페이지의 번들을 한꺼번에 전송하기보다는, 필요한 순간에 필요한 부분만 가져오도록 하여 초기 로딩 속도를 개선하기 위한 것입니다.

이를 통해 사용자는 더 빠르게 초기 페이지를 보게 되며, 필요한 경우에만 추가 자원을 요청하여 사용하게 됩니다. 이는 Next.js의 특징 중 하나인 “Code Splitting”에 해당됩니다.

요약

초기에는 필수적이고 공통적인 자원만 로딩하고, 특정 경로 이동 시 해당 경로에 필요한 자원을 추가적으로 가져옵니다.
이러한 동작 방식은 사용자 경험을 강화하고 불필요한 네트워크 사용을 줄여줍니다.

관련 자료 및 유사 질문 참고:
- 구체적인 예제나 추가 설명이 필요하시면 Next.js에서의 번들링과 하이드레이션 질문도 함께 참고하시면 도움이 됩니다.

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

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