[노마드코더]Next.js #1 hydration

노마드코더님의 Next.js 강좌를 보면서 정리한 내용입니다.

hydration

서버단에서 먼저 pre-rendering한 HTML파일을 브라우저에 전송한 뒤 JS코드를 전달해서 동작하게 한다. 네트워크 탭을 확인해보면 document type파일을 받고 js파일을 chunk단위로 받는 것을 확인해볼 수 있다. 이미 있던 HTML DOM 요소들 위로 JS파일들이 한번 쭉 흘러가면서 렌더링이 필요한 부분에는 다시 렌더링을 하는 등 각 자리를 찾아가며 매칭되는데 이걸 보고 자바스크립트 코드들이 DOM 요소 위 물을 채우듯 필요한 요소들을 채운다고해서 Hydrate(수화)라고 한다.