React에서 Next js 를 사용할 때 동작 순서
- 서버에서 리액트 컴포넌트를 HTML string 형태로 렌더링
- 렌더링된 HTML을 클라이언트에게 보냄
- javascript로 된 리액트 코드를 클라이언트에게 보냄
- html을 리액트로 hydrate
Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거친다.
Hydrate과정
Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정
화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다.
Next.js의 웹 페이지 구성 원리
Next.js는 클라이언트에게 웹 페이지를 보내기 전에 Server Side 단에서 미리 웹 페이지를 Pre-Rendering 한다. 그리고 Pre-Redering 이후에 생성된 HTML document를 클라이언트에게 전송한다.
현재 클라이언트가 받은 웹 페이지는 단순히 웹 화면만 보여주는 HTML일 뿐이고, 자바스크립트 요소들이 하나도 없는 상태이다. 이는 웹 화면을 보여주고 있지만, 특정 JS 모듈 뿐 아니라 단순 클릭과 같은 이벤트 리스너들이 각 웹 페이지의 DOM 요소에 하나도 적용되어 있지 않은 상태임을 말한다.
예를들어 Next.js 환경에서 동작하는 홈페이지인 오늘의 꽃의 네트워크 탭을 보면 맨 처음 응답받는 요소가 document Type의 파일이고, 이후에 css파일과, font파일, React 코드들이 렌더링 된 JS 파일들이 Chunk 단위로 다운로드되는 것을 확인할 수 있다.
그리고 이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서, 각자 자기 자리를 찾아가며 매칭이 된다.
이 과정을 Hydrate라고 부른다
.gif)
위의 GIF의 상단 메뉴를 보면 잠깐의 스타일 깜빡임이 발생한다. 이것은 Next.js에서 나타나는 일반적으로 많이 보이는 현상이다.
새롭게 페이지를 로딩할 때마다 약간 뒤늦게 스타일이 적용되는 듯한 이 과정이, HTML DOM 요소에 뒤늦게 자바스크립트가 동작하고 Hydration 돼서 나타나는 현상이다.
- 오늘의 꽃 같은 경우는 Code Splitting을 이용해서 코드를 Chunk 형태로 잘 분리가 되어있다. 네트워크 탭을 열고 스크롤을 내리면 청크파일을 추가로 받아온다
