hydration1 [Next.js] Hydration HydrationSever-Side에서 렌더링 된 정적 페이지(HTML)와 번들링 된 JS파일을 Client-Side에서 HTML 코드와 JS 코드를 서로 매칭 시키는 과정을 의미합니다. CSR과 Pre-Rendering기본적으로 리액트는 CSR 방식으로 랜더링을 하기 때문에 빈 HTML을 서버로부터 받고 클라이언트에서 모든 렌더링을 진행합니다.반면에 Next.js같은 프레임워크들은 서버에서 렌더링 된 HTML을 클라이언트로 보내고 클라이언트에서 매칭을 진행하는데 이 방식을 Pre-Rendering(SSG,SSR)이라고 부릅니다.이러한 prerendering 방식을 사용하면 서버에서 렌더링될 때 마크업이 생성되고 클라이언트에서는 해당 서버의 마크업과 일치하는 컴포넌트를 찾아 이벤트 처리 밎 매칭을 진행.. Frontend 2024. 5. 27. 더보기 ›› 이전 1 다음