Next.js-before-hydration, Next.js-hydration

Next.js-before-hydration, Next.js-hydration

회사 홈페이지 performance탭에서 timing을 보니 next.js-before-hydration, next.js-hydration이 있었다.

SSR 기능이라고 어렴풋이 알고 있었지만 정확한 정의를 몰라서 이번기회에 살펴보았다.

hydration와 next렌더링 방식

일단 네트워크탭을 보면 document 데이터를 먼저 다운받고 그 이후 js파일들을 다운받고 있다.

Next.js의 렌더링과정을 복기해보면

1. Next server에서 html을 만들어 보내주고
2. 이후에 React로 CSR이 작동하면서 js가 작동한다.

이때 2번 작업을 hydration이라고 하는데 물을 공급하는 것 처럼 html에 js를 뿌려주는 것을 상상했다고 한다.

https://helloinyong.tistory.com/323

 

어쨌든, Next.js-hydration이 server에서 만들어진 html위에 js를 뿌려주는것이기 때문에 DCL이후 hydration이 발생하는 것이다.

• DCL : DomContentLoaded, DOM 이 생성되면 발생하는 이벤트이다. 보통 자바스크립트 코드는 DOMContentLoaded 이후에 동작하도록 구현한다. DOM을 조작하는 자바스크립트 코드가 DOM 생성 이후에 발생하면 안되기 때문.

그렇다면 Next.js-before-hydration은 뭘까. next 서버에서 document를 만드는 것이다.

---

partial hydration과 lazy hydration도 알아볼 주제다

partial hydration은 dom조작이 필요없는 컴포넌트은 제외하고 hydration하는 기능이고

lazy hydration은 footer처럼 당장 뷰포트에 나타나지 않는 컴포넌트들을 lazy 하게 hydration하는 기능이다.