Next.js의 수화작용 Hydration

프론트엔드 서버를 작동시켜서 문서를 실행시키면 NextJS 서버 내부에서 html 코드를 생성하는 프리렌더링을 시도한다. 기능은 아직 아무것도 안되지만 빠르게 그림 먼저 보여주는 방식. 프리렌더링으로 만들어진 html 코드를 브라우저로 전송하고 브라우저는 소스를 다운로드 받은 후 실행시켜 화면에 띄운다. 이후에 요청한 javaScript 파일을 다운로드 받는다. 이때 프리렌더링 된 부분과 javaScript 파일 안에 있는 내용과 비교를 하고(Diffing) 없는 부분을 새로 그리고 javaScript 기능을 적용한다(Hydration).

네트워크가 느린 환경에서 버튼 등이 제대로 클릭되지 않는 것도 수화작용 중이기 때문이다.

---

프리렌더링 과정은 브라우저에서 일어나는 것이 아니고 NextJS 서버에서 일어나는 것이기 때문에 함수나 바인딩 된 이벤트 안에 있는 것이 아닌, 개별코드로 작성된 WEB APIs 와 window 객체는 실행되지 못하고 오류가 난다(localStorage, alert 등).

1. 조건문으로 browser 일 때만 실행

• if(process.browser)
• if(typeof window !== "undefined")

2. useEffect 활용
   (useEffect는 화면이 다 그려진 후에 브라우저에서 실행)

---

return (
  <div>
  	<div style={{color: "blue"}}>111</div>
	{process.browser && 
		<div style={{color: "green">222</div>}
	<div style={{color: "purple"}}>333</div>
  </div>
)

서버에서 html 태그가 프리렌더링 될 땐 조건부 렌더링되는 태그가 아예 그려지지 않는다. 후에 diffing 단계에서는 태그를 기준으로 비교를 하는데 프리렌더링 시 태그가 그려지지 않았기 때문에 CSS가 의도와 다르게 적용이 된다.
그렇기 때문에 브라우저에서만 렌더링 되는 태그가 있다면 아래와 같이 삼항연산자로 작성해 서버에서도 빈 태그가 있도록 해야한다.

return (
  <div>
  	<div style={{color: "blue"}}>111</div>
	{process.browser ? 
		(<div style={{color: "green">222</div>) ? (<div style={{color: "green"}} />)}
	<div style={{color: "purple"}}>333</div>
  </div>
)