Nextjs Hydration
서버 측에서 렌더링된 HTML과 클라이언트 측에서 실행되는 JavaScript 코드를 조합하여 페이지를 초기 렌더링하는 기술
초기 로딩 속도를 개선하고, SEO에 유리한 서버 사이드 렌더링(SSR)과 동적인 사용자 경험을 제공하는 클라이언트 사이드 렌더링(CSR)의 장점을 함께 활용할 수 있음
원리
1. 서버 측 렌더링(SSR)
- 사용자가 페이지에 접근할 때, Next.js는 서버 측에서 해당 페이지를 렌더링
- 필요한 데이터가 있을 경우, getStaticProps 또는 getServerSideProps를 통해 데이터를 미리 로드하여 렌더링
- 서버 측 렌더링된 페이지는 HTML 형태로 클라이언트로 전달. 이 HTML에는 페이지의 기본적인 구조와 내용이 포함
2. 클라이언트 측 자바스크립트 실행
- 브라우저가 HTML을 받으면, 클라이언트 측에서 해당 페이지의 JavaScript 코드가 실행
- 이때 클라이언트 측에서 이벤트 핸들러를 등록하고, 상태를 관리하며, 컴포넌트들을 생성
3. Hydration
- 브라우저가 HTML을 받아서 JavaScript를 실행하는 과정에서, 서버 측 렌더링된 HTML과 클라이언트 측에서 생성되는 컴포넌트들이 서로 일치하는지 확인
- 일치하지 않는 부분이 있다면, 클라이언트 측에서 해당 부분을 다시 렌더링하여 서버 측 렌더링된 페이지와 일치하도록 한다.
- Hydration이 완료되면, 페이지는 상호작용 가능한 상태가 되며, 사용자는 페이지를 탐색하고 이벤트를 발생시키면서 웹 애플리케이션을 사용할 수 있다.
Hydration을 통해 초기 페이지 로딩 속도가 향상되고, SEO에 유리한 서버 측 렌더링의 장점과 동적인 사용자 경험을 제공하는 클라이언트 측 렌더링의 장점을 동시에 활용할 수 있게 된다. Next.js는 이러한 Hydration을 자동으로 처리하여 개발자가 추가적인 작업 없이도 최적의 사용자 경험을 제공할 수 있도록 지원한다.