dev
Next Hydration?
hydration은 뭘까
#next
#hydration
Next.js에서는 페이지 로딩 시 클라이언트 측에서 서버 측으로 렌더링된 페이지를 가져와서 더 빠르게 페이지를 로드하는 기능인 "hydration(하이드레이션)"을 제공합니다.
Hydration은 일종의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 결합한 방식으로, 서버에서 전달된 HTML, CSS 및 JavaScript 코드를 사용하여 페이지를 렌더링한 다음, 이후에 JavaScript를 사용하여 클라이언트 측에서 추가적인 렌더링 작업을 수행합니다. 이를 통해 초기 페이지 로드 시간을 단축하고, 검색 엔진 최적화(SEO) 및 사용자 경험(UX)을 개선할 수 있습니다.
Next.js에서는 페이지를 미리 렌더링하여 초기 HTML 파일을 생성한 다음, 이 파일을 클라이언트에게 전달합니다. 클라이언트는 이 파일을 사용하여 초기 페이지를 렌더링하고, 이후에 JavaScript를 사용하여 페이지를 완성합니다. 이 과정에서, Next.js는 이전 페이지와 동일한 상태를 유지하면서, 새로운 페이지를 로드하므로 사용자가 불필요한 페이지 이동을 하지 않고, 원활한 사용자 경험을 제공할 수 있습니다.
Hydration은 Next.js의 핵심 기능 중 하나로, 개발자들이 더 나은 사용자 경험을 제공할 수 있도록 도와줍니다. 따라서, Next.js를 사용하여 웹 애플리케이션을 개발할 때는, Hydration 기능을 적극적으로 활용하여 최적화된 사용자 경험을 제공하는 것이 중요합니다.
