유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Easy Delayed Component Hydration in Nuxt!

Vue School

2025. 5. 27.

0

#frontend
  • Nuxt 3.16에서 지연 하이드레이션 기능이 추가됨. 🚀
  • Nuxt는 서버와 클라이언트 모두에서 컴포넌트를 렌더링함. 🖥️
  • lazy 접두사와 hydrate 속성을 사용하여 클라이언트 측 코드 실행 시점을 제어 가능. ⚙️
  • hydrateOnVisible은 컴포넌트가 화면에 보일 때 JavaScript를 다운로드하고 실행함. 👀
  • hydrateOnIdle은 브라우저에 여유 메모리가 있을 때 JavaScript를 실행함. ⏳
  • hydrateAfter는 지정된 시간(ms) 후에 컴포넌트를 하이드레이션함. ⏱️
  • hydrateOnMediaQuery는 특정 화면 크기에서만 JavaScript를 실행함. 📱
  • hydrateWhen은 반응형 데이터가 참일 때 컴포넌트를 하이드레이션함. ✅
  • hydrateNever는 서버에서만 렌더링하고 클라이언트에서 JavaScript를 다운로드하지 않음. 🚫

Recommanded Videos