Next.js 에서 Hydration 이란 무엇인가?

Next.js 에서 자주 등장하는 Hydration 이란 무엇일까?

Next.js 를 공부하다보면 Hydration 이라는 말을 많이 볼 수 있다. Hydration 이라는 말이 많이 나오는 이유는 Next.js 가 기본적으로 서버사이드 렌더링을 지원해서이다.

Hydration 이란, 정적 호스팅 혹은 서버사이드 렌더링을 통해 받은 HTML 웹 페이지를 동적인 웹페이지 로 만드는 과정을 말한다. 보통은 이벤트 핸들러 같은 것들을 붙여서 동적인 웹페이지를 만들곤 한다.

Next.js 는 Hydration 과정에서 리액트가 작동하는데 필요한 데이터를 모두 넘겨준다. 그래서 서버사이드 렌더링 이후에 우리의 앱을 부드럽게 리액트로 연결시켜 SPA 처럼 동작하게 만들어준다.