"사전 렌더링에서 해당 페이지의 HTML을 반환한다"의 의미

Question

다른 분들의 질문에 대한 답변에서 "사전 렌더링 방식에서 서버가 주는 것은 전체 HTML이 아닌 그 페이지의 HTML이다"와 같은 표현이 많이 보여서 질문 드립니다.

페이지 이동 시 시뮬레이션을 설명하면서 사용하신 컴포넌트 교체, 컨텐츠 렌더링과 같은 표현들을 미루어 보았을 때, 아래와 같은 작업이 이루어질 것이라고 생각했는데요,

수화 과정 역시 HTML을 리액트가 핸들링할 수 있도록 하는 작업(리액트 문서 참고)이기 때문에 초기 렌더링 시에만 일어난다고 이해했습니다.

페이지 이동 시마다 HTML을 새로 생성하는 것인지, 또 수화의 정확한 의미는 무엇인지 공부할수록 헷갈리게 되어 질문 남기게 되었습니다.

제가 잘 이해한 것이 맞을까요?

이정환 Winterlood · Answer

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

네 잘 이해하셨습니다. 접속 요청시에 Next.js 웹 서버는 사전 렌더링 된 HTML을 반환하고, 사용자가 페이지를 이동할 경우 클라이언트 사이드에서 HTML 돔 트리가 수정됩니다. 수화(하이드레이션) 작업도 말씀하신대로 첫 접속 시에만 이루어집니다.

그러나 페이지 이동시 마다 Next.js 서버가 HTML을 새로 생성하지는 않습니다. (질문에 어디서 생성하는지는 남겨주시지 않아서 일단 Next.js 서버라고 이해했습니다)

강의에서 말씀드렸듯이 Next.js는 첫 접속 요청에만 완성된 HTML을 서버 측에서 생성하고, 이후의 페이지 이동은 기존의 리액트 앱의 방식대로 CSR(클라이언트 측에서 리액트 앱을 실행하여 직접 DOM 트리를 수정하는 방식)으로 이루어집니다.

그런데 이때, CSR 방식으로 페이지를 이동하려면 리액트 앱을 브라우저가 가지고 있어야 되겠죠? 그래야 이 앱을 실행하여 페이지를 이동할 테니까요!

그렇기 때문에 Next.js 웹 서버는 초기 접속 요청시에 브라우저에게 HTML 파일만 전달하는게 아니라, 리액트 앱인 JS bundle도 함께 전달하게 됩니다.

그럼 브라우저는 리액트 앱인 JS Bundle을 서버로부터 전달받아 이를 실행하여, 먼저 전달받은 HTML에 연결합니다. 그렇게 되면 JS 로 구현된 각종 이벤트 핸들러등이 이제 동작하게 됩니다. 이 과정을 바로 수화라고 표현합니다.

이해가 안되시는 부분이 있다면 꼬리질문 주세요! 이해가 되실 때 까지 질문 받아드릴 수 있으니 자유롭고 편하게 이해가 되실때 까지 계속 질문주시면 감사하겠습니다

PS. 새로운 질문으로 작성해주시면 제가 알림 확인하기가 더 용이하니 고렇게 해 주시면 더 좋을 것 같아요

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 현수님께서 사전 렌더링과 관련하여 궁금해하시는 부분을 이해하기 쉽게 설명해 드리겠습니다.

Next.js에서 “사전 렌더링”은 서버 측에서 페이지 콘텐츠를 미리 HTML로 생성하여 클라이언트에 제공하는 방식입니다. 이는 주로 SEO 최적화와 초기 로딩 속도 개선에 큰 도움이 됩니다.

사전 렌더링 시점: 유저가 페이지에 접속할 때, Next.js 서버는 해당 페이지의 HTML을 생성하여 클라이언트에 반환합니다. 이때 반환되는 HTML에는 페이지에 대한 초기 모습과 필요한 정적 콘텐츠가 포함됩니다.
페이지 이동 시 동작: 페이지 이동을 할 때마다 새로운 HTML을 서버로부터 다시 받아오는 것이 아니라, 이미 서버에서 사전 렌더링된 HTML 기반으로 CSR(Client-Side Rendering) 방식이 적용되어 있는 JS 번들이 실행됩니다. 즉, 첫 페이지의 경우 새로 서버에서 HTML을 만들어 주지만, 이후 페이지 간 이동에서는 JS가 클라이언트에서 작동하여 빠른 페이지 전환이 이루어집니다.

수화 과정: 초기 HTML이 렌더링된 후에 브라우저는 React의 JS 번들을 다운로드하고 이를 사용하여 기존의 HTML 구조에 대하여 상호작용을 가능하게 합니다. 이 때를 “Hydration”이라고 하며, 이는 사전 렌더링된 HTML과 클라이언트의 React 코드를 결합하여 동적으로 작동할 수 있도록 설정하는 작업입니다.

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