Next.js를 작업하면서 Hydrate라는 개념이 계속 나왔다.
그래서 제대로 알아보고자 글로 정리해보려고 합니다.
수산화 시키다
: SSR을 하면 떠오르는 개념입니다.
SSR의 경우 완성된 HTML은 사전 렌더링을 통해 클라이언트에 전달됩니다.
- 서버에서 렌더링된 정적 페이지를 클라이언트로 보냅니다.
- React는 번들로 제공되는 JavaScript 코드를 클라이언트에 보냅니다.
- 클라이언트는 수신된 HTML 및 JS 코드와 일치하는 Hydrate를 실행합니다.
- Hydrate는 수신된 JavaScript가 이전에 전송된 HTML DOM 요소에 대해 다시 렌더링되어 각각의 위치를 찾고 일치함을 의미합니다.
→ Next.js 프로젝트에서 개발한 React 컴포넌트를 프런트엔드에서 실행만들다 수화그것은이라고. Next.js는 이미 HTML로 코드를 렌더링했으며 React 구성 요소와 JavaScript가 로드되지 않더라도 빈 화면 대신 기본값으로 구성된 페이지가 표시됩니다.
마지막으로 JavaScript 로드가 완료되면 모든 요소가 나타나고 그 후에는 반응 앱처럼 작동합니다.
GIF 이미지와 같은 짧은 문체 깜박임도 Next.js에서 일반적입니다.
새 페이지가 로드될 때마다 스타일이 약간 지연되어 적용되는 것처럼 보입니다.
이는 JavaScript가 HTML DOM 요소와 늦게 작동하여 수화될 때 발생하는 현상입니다.
웹폰트는 JavaScript를 사용하여 외부 서버에서 요청하고 수신하는데, 이는 pre-hydrate 웹폰트를 요청하지 못하고 적용하지 않았기 때문입니다.
두 번 렌더링하는 방법
서버 측에서 신속하게 사전 렌더링하고 빠른 웹 페이지로 사용자에게 응답할 수 있다는 것은 큰 이점입니다.
사전 렌더링된 문서는 자바스크립트 요소 없이 매우 가볍고 클라이언트에서 빠르게 로딩할 수 있어 같은 화면을 두 번 렌더링해야 하는 단점을 보완합니다.
JavaScript가 클라이언트 측에서 렌더링될 때 각 DOM 요소의 JavaScript 속성을 사용자 지정하는 데만 사용되기 때문에 실제 웹 페이지를 다시 그리는 프로세스를 거치지 않습니다.
즉, Paint 함수를 호출하지도 않습니다.
Paint 기능이 무엇인지 모르신다면 라이프 사이클을 공부하시는 것을 추천합니다.
TTV와 TTI의 개념
