Server side rendering (SSR)
- 서버에서 HTML을 미리 렌더링하여 클라이언트에 전달하는 방식
SSR 실행 과정
- 요청 수신: 사용자가 웹 페이지를 요청하면, 클라이언트(브라우저)는 Next.js 서버에 HTTP 요청을 보낸다
- 페이지 데이터 준비: Next.js 서버는 페이지를 렌더링하기 전에 필요한 데이터를 준비한다. 이 과정에서 getServerSideProps 함수를 사용하여 데이터 fetch 작업을 수행합니다. 이 함수는 서버 사이드에서만 실행된다
- 페이지 렌더링: 데이터가 준비되면, Next.js 서버는 페이지를 서버 사이드에서 렌더링한다 이때, React 컴포넌트가 HTML로 변환되어 클라이언트로 전송된다
- HTML 전송: 렌더링된 HTML은 클라이언트로 전송된다. 클라이언트는 이 HTML을 사용하여 페이지를 표시한다. 이 과정에서 JavaScript 코드와 CSS 스타일도 함께 전송된다.
- 클라이언트 측 렌더링: 클라이언트에서 JavaScript가 로드되고 실행되면, React 컴포넌트가 클라이언트 측에서 "하이드레이션" 과정을 거친다
Hydration
- 클라이언트 측에서 서버에서 렌더링된 HTML을 React 컴포넌트와 연결하여, 페이지의 상호작용성을 추가하는 과정
- 이 과정에서 React는 서버에서 생성된 HTML을 사용하여 초기 렌더링을 빠르게 하고, 이후 클라이언트 측에서 동적 업데이트를 처리한다
하이드레이션 과정
- 서버에서 렌더링된 HTML 로드: 클라이언트는 서버에서 렌더링된 HTML을 받아서 브라우저에 표시한다. 이 단계에서 페이지는 기본적으로 완성된 상태이다.
- JavaScript 번들 로드: 클라이언트 측에서 React 애플리케이션의 JavaScript 번들이 로드된다. 이 번들에는 React와 관련된 코드와 컴포넌트 로직이 포함되어 있는다
- React 컴포넌트 초기화: React는 서버에서 렌더링된 HTML을 읽어 들이고, 이를 React 컴포넌트 트리와 연결한다. 이 과정에서 React는 서버에서 렌더링된 HTML과 클라이언트 측 컴포넌트 간의 차이를 분석한다
- 이벤트 핸들링 추가: 하이드레이션 과정에서 React는 사용자 인터랙션을 처리하기 위해 이벤트 핸들러를 추가한다. 이를 통해 페이지는 사용자와의 상호작용이 가능한 상태로 전환된다
- 상태 동기화: 서버에서 렌더링된 HTML과 클라이언트 측의 React 상태를 동기화한다 이 단계에서 React는 DOM을 업데이트하고, 페이지를 동적 상태로 유지한다.
Reference
