Next.JS Hydration이란.

기존에 막연했던 Next.js의 hydration 개념을 짧지만 명확히 정리해보려 합니다.

 

일단 hydration은 '수분을 공급하다'라는 뜻의 영어 동사인 hydrate의 명사형입니다.

 

저는 hydration이 단순히 사용자가 Next.js로 제작한 사이트에 진입하면

pre-rendering된 html을 받은 후에 다른 페이지로 이동할 때 서버에서 필요한 React 실행 코드를 받아

React의 csr방식으로 부드러운 화면 전환을 가능하게 하는 것이 어플리케이션에 수분을 공급하는 행위에 비유한 것이라고 생각하여 이것을 hydration이라고 생각했습니다.

 

하지만 Next.js에서 hydration는 조금 더 깊은 의미를 가집니다.

 

이것을 이해하려면 먼저 일반적인 html와 Next.js의 자바스크립트 전송 방식의 차이를 알아야 합니다.

 

일반적으로 js파일을 요청하게 될 때, 브라우저는 먼저 html파일을 해석하다가 script 태그를 만나면 작업을 멈추고 src 속성에 따라 그 경로의 js파일을 서버로부터 요청하게 됩니다.

그리고, 그 js파일을 평가, 해석하기 시작하는데, 이 작업과 html이 문자열을 파싱해 토큰 단위의 노드들을 DOM으로 제작하는 작업은 동시에 이루어질 수 없기 때문에 js파일을 해석하는 작업을 꼭 마무리해야 다시 DOM을 생성하는 단계로 복귀할 수 있습니다.

 

반면, Next.js는 먼저 js 파일과 관계되지 않은 pre-rendering된 html을 클라이언트에 전송합니다.

따라서 이 프레임워크가 제공하는 특유의 장점인 클라이언트에 빠른 화면 보여주기가 가능하며,

웹 바이탈의 핵심 메트릭스 중 하나인 LCP(Largest Contentful Paint)에 상당한 강점을 가진다고 할 수 있습니다.

 

그리고 화면이 브라우저에 렌더링이 된 후 필요한 js파일들을 서버로부터 다운로드합니다.

이 js파일들은 단순히 현재 페이지에서 다른 페이지로 이동할 때 csr방식으로 이동이 가능하게끔 하는 로직뿐만 아니라 개발자로부터 인터렉션 요소가 부여된 모든 노드들에 이벤트리스너를 부착하는 역할 또한 수행합니다.

 

이 작업이 모두 끝난 후에야 이 Next.js 어플리케이션은 사용자의 입력을 받을 수 있는 상태로 'hydrate'된다고 할 수 있습니다.

즉, Next.js는 위의 이미지의 프로세스를 거쳐 실행됩니다.

 

위 내용을 제가 만든 프로젝트의 페이지로 확인해 보겠습니다.

 

브라우저에 프로젝트의 리스트 페이지 url을 입력해 접속했을 때 네트워크 탭의 모습입니다.

 

역시 리스트 페이지로 진입했기 때문에 서버는 리액트 구동 js 파일과 함께 리스트 페이지와 관련된 로직의 js파일만을 함께 먼저 제공하여 최적화된 hydration을 프레임워크 내부 자체적으로 제공합니다.

만약 생성(create) 페이지로 처음 진입했다면 위의 chuck된 리액트 구동 js파일에 이어 생성 페이지의 js파일을 제공할 것입니다.

 

그리고 최하단, 가장 늦게 다운로드되는 js 파일들은 다른 페이지의 비즈니스 로직과 관련된 내용들로

Next.js가 알아서 코드 스플리팅을 수행해 생성된 파일들입니다.

 

즉, 다른 페이지의 비즈니스 로직을 수행하는 js 파일들은 가장 늦게 다운로드되기 때문에

브라우저가 초반에 해석해야 할 코드의 양을 상당히 줄여줄 수 있습니다.

 

이는 Next.js가 사용자에게 좀 더 빠른 실행환경을 경험할 수 있게 하는 장점을 가지는 이유입니다.

따라서, 웹 바이탈의 TTI(Time To Interact)에도 일반적인 React 어플리케이션보다 뛰어나다고 할 수 있습니다.