next.js Hydrate (1) 썸네일형 리스트형 [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 코드들이 이전에 보내.. 이전 1 다음