[Next.js] PreRendering 과 Hydration

PreRendering 이란?HTML을 미리 만들어두는 과정이다. 서버에서 React 컴포넌트를 실행하여 그 결과물인 HTML(DOM 문자열)을 브라우저에 먼저 보내는 것을 말한다.이를 통해 사용자는 자바스크립트가 로딩되기 전에도 빠르게 콘텐츠를 볼 수 있고, 이는 SEO에 유리하며 초기 로딩 속도를 개선할 수 있다. Hydration 이란?미리 렌더링된 HTML에 Javascript에 붙이는 과정이다. 서버는 React Component를 HTML로 렌더링한다.클라이언트(브라우저)는 이 HTML을 받아 React가 DOM 트리를 동일하게 다시 그려본다. (virtual DOM)그 후 이벤트 핸들러와 상태(state)를 연결해 실제로 작동 가능하게 만드는 것이 hydration이다.❓Hydration이..