[Next.js] Hydrate 간단하게 정리

 

일단 설명하기 전에,

react에서 렌더링 되는 과정과 next에서 렌더링 되는 과정의 차이점에 대해서 정리합니다.

 

1. React.js

Html과 JS파일을 한꺼번에 보내고 클라이언트에서 JS코드를 통해 웹 화면을 렌더링

 

2. Next.js

Pre-rendering된 Html을 클라이언트에 전송

그 이후에 번들링된 React 코드(JS)들이 클라이언트에 전송

위 두개가 합쳐짐 = Hydrate

 

  정리   

 

위에 Next.js에 정리된 부분을 보면 

먼저 전달받은 Pre-rendering된 Html은 단순하게 html으로만 구성된 화면이고, 자바스크립는 하나도 없는 상태입니다.

웹 화면을 보여주지만, 이벤트 리스너들도 각 DOM요소에 적용되기 전 상태라는 것!

 

그 이후에 번들링 된 React 코드들이 이전에 보내진 Html DOM요소 위에 한번 더 렌더링을 하게되는데,

DOM tree에 해당하는 DOM 요소들을 찾아 자바스크립트 속성(이벤트 리스너 등)을 부착되는 일을 하는것을 Hydrate이라고 한다!

 

 

 

---

✔️참고 

https://helloinyong.tistory.com/315