[Next.js] Next.js에서 SSR을 실행하는 과정과 hydration

🔍 서버 사이드 렌더링이란? (SSR)

SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 서버에서 이루어지는 아키텍처를 의미한다. 사전적인 의미는 이렇지만, 일반적으로 현대의 SSR은 "첫 HTML 렌더링을 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리" 하는 하이브리드 형태의 SSR을 가리킨다. SSR은 첫 HTML 렌더링을 서버에서 처리하기 때문에, 사용자의 화면에 콘텐츠가 그려지는데 걸리는 시간 (FCP)이 짧다. 

 

🚀 Next.js의 SSR 실행 과정

 

1️⃣ 접속 요청

- 사용자가 브라우저에서 특정 URL에 접속하면, 브라우저는 서버에 해당 URL에 대한 요청을 보낸다. Next.js는 해당 요청을 감지하고, SSR을 통해 서버에서 페이지를 렌더링할 준비를 한다.

 

2️⃣ 서버에서 페이지 렌더링

- Next.js는 요청된 페이지에 맞는 React 컴포넌트를 서버에서 실행하여 HTML을 미리 생성한다. 이 과정에서 필요한 데이터가 있으면 getServerSideProps()와 같은 메소드를 통해 API 호출 또는 데이터베이스 쿼리를 수행한 뒤, 이를 기반으로 최종 HTML을 완성한다.

 

3️⃣ HTML 전송 및 초기 렌더링

- 완성된 HTML은 클라이언트로 전송되며, 브라우저는 이를 받아 즉시 화면에 콘텐츠를 렌더링한다.

 

4️⃣ Hydration

- 브라우저는 HTML을 렌더링한 후, Next.js가 제공하는 JavaScript 번들을 다운로드해 실행한다. 이 과정에서 HTML과 React 컴포넌트의 로직, 상태, 이벤트 핸들러 등을 연결하는데, 이를 Hydration이라고 한다.

 

5️⃣ 사용자 상호작용

- Hydration이 완료된 후, React는 브라우저에서 완전히 동작하게 되며, 사용자는 React 컴포넌트를 통해 동적인 상호작용을 할 수 있다.

 

📌 Hydration 이란?

서버사이드 렌더링 과정에서 클라이언트 측에서 자바스크립트를 통해 추가적인 기능 (예: 이벤트 처리, 상태 관리 등)을 활성화하는 과정을 하이드레이션이라고 한다.

 

 

📚 Hydration 예시

1️⃣ 서버 사이드 렌더링 단계

import ReactDOMServer from 'react-dom/server';
import App from './App';
 
// 서버에서 React 컴포넌트를 HTML로 렌더링
const html = ReactDOMServer.renderToString(<App />);

 

- 서버는 <App/> 컴포넌트를 HTML 문자열로 렌더링하여 클라이언트에 전송한다.

- 클라이언트는 이 HTML을 받아서 화면에 표시한다. 

 

2️⃣ 클라이언트에서 하이드레이션 단계

import ReactDOM from 'react-dom';
import App from './App';
 
// 클라이언트에서 기존 HTML을 하이드레이션
ReactDOM.hydrate(<App />, document.getElementById('root'));

 

- 클라이언트는 서버에서 받은 HTML을 기반으로 하이드레이션을 수행한다.

- ReactDom.hydrate()는 서버에서 렌더링된 HTML을 가져와서 React의 동적 기능을 활성화한다.

- 이 과정에서 이미 존재하는 DOM을 재사용하며, 변경이 필요한 부분만 업데이트한다.

 

🔥 결론

Next.js의 SSR은 서버에서 미리 HTML을 렌더링해 클라이언트에 전달함으로써, 초기 로딩 속도를 개선하고 SEO 최적화에 유리한 환경을 제공한다는 강점을 가진다. 이후 클라이언트에서는 Hydration을 통해 정적인 HTML에 React 기능을 연결해 동적인 인터랙션이 가능한 SPA처럼 작동하게 된다.