Next.js에서 SSR을 실행하는 과정과 hydration에 대해

 

Next.js에서 서버 사이드 렌더링(SSR)과 하이드레이션(hydration)은 중요한 개념으로, 서버와 클라이언트 간의 렌더링 과정과 상호작용을 다룹니다. 각각의 개념을 자세히 살펴보겠습니다.

1. 서버 사이드 렌더링 (SSR)

서버 사이드 렌더링은 서버에서 HTML을 미리 렌더링하여 클라이언트에 전달하는 방식입니다. 이를 통해 페이지의 초기 로딩 속도를 개선하고, SEO 최적화에 유리합니다.

SSR 실행 과정

1. 요청 수신: 사용자가 웹 페이지를 요청하면, 클라이언트(브라우저)는 Next.js 서버에 HTTP 요청을 보냅니다.
2. 페이지 데이터 준비: Next.js 서버는 페이지를 렌더링하기 전에 필요한 데이터를 준비합니다. 이 과정에서 getServerSideProps 함수를 사용하여 데이터 fetch 작업을 수행합니다. 이 함수는 서버 사이드에서만 실행됩니다.
3. 페이지 렌더링: 데이터가 준비되면, Next.js 서버는 페이지를 서버 사이드에서 렌더링합니다. 이때, React 컴포넌트가 HTML로 변환되어 클라이언트로 전송됩니다.
4. HTML 전송: 렌더링된 HTML은 클라이언트로 전송됩니다. 클라이언트는 이 HTML을 사용하여 페이지를 표시합니다. 이 과정에서 JavaScript 코드와 CSS 스타일도 함께 전송됩니다.
5. 클라이언트 측 렌더링: 클라이언트에서 JavaScript가 로드되고 실행되면, React 컴포넌트가 클라이언트 측에서 "하이드레이션" 과정을 거칩니다.

2. 하이드레이션 (Hydration)

하이드레이션은 클라이언트 측에서 서버에서 렌더링된 HTML을 React 컴포넌트와 연결하여, 페이지의 상호작용성을 추가하는 과정입니다. 이 과정에서 React는 서버에서 생성된 HTML을 사용하여 초기 렌더링을 빠르게 하고, 이후 클라이언트 측에서 동적 업데이트를 처리합니다.

하이드레이션 과정

1. 서버에서 렌더링된 HTML 로드: 클라이언트는 서버에서 렌더링된 HTML을 받아서 브라우저에 표시합니다. 이 단계에서 페이지는 기본적으로 완성된 상태입니다.
2. JavaScript 번들 로드: 클라이언트 측에서 React 애플리케이션의 JavaScript 번들이 로드됩니다. 이 번들에는 React와 관련된 코드와 컴포넌트 로직이 포함되어 있습니다.
3. React 컴포넌트 초기화: React는 서버에서 렌더링된 HTML을 읽어 들이고, 이를 React 컴포넌트 트리와 연결합니다. 이 과정에서 React는 서버에서 렌더링된 HTML과 클라이언트 측 컴포넌트 간의 차이를 분석합니다.
4. 이벤트 핸들링 추가: 하이드레이션 과정에서 React는 사용자 인터랙션을 처리하기 위해 이벤트 핸들러를 추가합니다. 이를 통해 페이지는 사용자와의 상호작용이 가능한 상태로 전환됩니다.
5. 상태 동기화: 서버에서 렌더링된 HTML과 클라이언트 측의 React 상태를 동기화합니다. 이 단계에서 React는 DOM을 업데이트하고, 페이지를 동적 상태로 유지합니다.

요약

• 서버 사이드 렌더링 (SSR): 서버에서 HTML을 렌더링하여 클라이언트로 전송합니다. 초기 로딩 속도와 SEO에 유리합니다.
• 하이드레이션 (Hydration): 클라이언트 측에서 서버에서 렌더링된 HTML을 React 컴포넌트와 연결하여 동적 기능을 추가합니다.

SSR과 하이드레이션은 함께 작동하여, 초기 로딩 속도를 개선하고, 사용자와의 상호작용을 가능하게 하며, SEO를 최적화하는 데 도움을 줍니다.