지연된 Hydration 전략
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction()과 Nuxt 지연 Hydration을 익힙니다.
지연된 Hydration 전략은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
하이드레이션 비용 문제
SSR은 바로 볼 수 있는 HTML을 보내지만, 클라이언트는 상호작용이 가능하도록 모든 컴포넌트를 하이드레이션해야 합니다. 모든 컴포넌트를 한꺼번에 하이드레이션하면 주 스레드가 차단되고 상호작용 가능 시점(TTI)이 늦어집니다.
지연 하이드레이션은 컴포넌트가 실제로 필요해질 때까지 하이드레이션을 미룹니다.
Nuxt 자동 지연 로드 접두사
Nuxt에서는 컴포넌트 앞에 Lazy를 붙이면 해당 컴포넌트를 지연 가져옵니다. 하이드레이션 전략과 함께 사용하면 JS 다운로드와 하이드레이션 작업을 모두 미룰 수 있습니다.
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>hydrateOnVisible
hydrateOnVisible은 IntersectionObserver를 내부적으로 사용하여 컴포넌트가 뷰포트 안으로 스크롤되어 들어올 때만 하이드레이션합니다. 첫 화면 아래 영역에 적합합니다.
<template>
<!-- Nuxt syntax: hydrate when visible -->
<LazyProductReviews hydrate-on-visible />
</template>
<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->여백을 사용하는 hydrateOnVisible
IntersectionObserver 옵션을 전달하면 요소가 표시되기 전에 하이드레이션을 시작하여 더 자연스러운 경험을 제공할 수 있습니다.
<template>
<!-- start hydrating 100px before entering viewport -->
<LazyComments
:hydrate-on-visible="{ rootMargin: '100px' }"
/>
</template>hydrateOnIdle
hydrateOnIdle은 브라우저가 유휴 상태가 될 때까지(requestIdleCallback을 통해) 기다린 후 하이드레이션합니다. 초기 상호작용과 경쟁해서는 안 되는 비핵심 위젯에 사용하세요.
<template>
<!-- hydrate during idle time -->
<LazyNewsletterSignup hydrate-on-idle />
<!-- optional max timeout in ms -->
<LazyChatBubble :hydrate-on-idle="3000" />
</template>hydrateOnInteraction
hydrateOnInteraction은 요소에서 지정된 DOM 이벤트가 발생할 때까지 하이드레이션을 미룹니다(클릭, 포커스, 마우스 오버). 사용자가 상호작용하기 전까지 컴포넌트는 정적인 HTML로 유지됩니다.
<template>
<!-- hydrate only on click -->
<LazyDropdownMenu hydrate-on-interaction="click" />
<!-- multiple events -->
<LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>hydrateOnMediaQuery
hydrateOnMediaQuery는 미디어 쿼리가 일치할 때만 하이드레이션합니다. 예를 들어 모바일에서 숨겨지는 데스크톱 전용 사이드바를 하이드레이션하여 작은 화면에서 불필요한 작업을 피할 수 있습니다.
<template>
<!-- only hydrate on wide screens -->
<LazyDesktopSidebar
hydrate-on-media-query="(min-width: 1024px)"
/>
</template>Vue 핵심 API: 하이드레이션 도우미
Nuxt 외부에서도 동일한 전략을 하이드레이션 도우미로 사용할 수 있으며, defineAsyncComponent의 hydrate 옵션에 전달합니다. Nuxt의 접두사는 이를 간편하게 표기한 것입니다.
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const LazyChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
hydrate: hydrateOnVisible()
})적절한 전략 선택하기
목적에 맞는 전략을 선택하세요.
- 표시 — 첫 화면 아래의 콘텐츠(리뷰, 푸터)
- 유휴 — 백그라운드 위젯(분석, 뉴스레터)
- 상호작용 — 사용자 동작으로 표시되는 사용자 인터페이스(메뉴, 모달)
- 미디어 쿼리 — 기기별 사용자 인터페이스
주의할 절충점
지연 하이드레이션은 TTI를 향상시키지만 트리거가 발생할 때까지 컴포넌트가 상호작용할 수 없는 상태로 남는다는 의미입니다. 상호작용 기반 전략에서는 첫 클릭이 하이드레이션을 시작하는 데 사용되므로 약간 지연되는 것처럼 느껴질 수 있습니다. 주요 행동 유도 사용자 인터페이스에는 즉시 하이드레이션을 사용하세요.
아일랜드와 결합하기
지연된 하이드레이션은 아일랜드 아키텍처와 함께 사용됩니다. 페이지 대부분은 서버에서 렌더링된 정적 HTML이고, 상호작용이 가능한 아일랜드만 전략에 따라 지연해서 하이드레이션합니다. 그 결과 클라이언트 JS는 최소화되고 필요한 곳에서 빠른 상호작용을 제공할 수 있습니다.
<template>
<StaticArticle /> <!-- never hydrates -->
<LazyCommentBox hydrate-on-visible />
<LazyLikeButton hydrate-on-interaction="click" />
</template>빠른 확인
하이드레이션 전략에 대한 이해도를 확인해 보세요.
복습
지연된 하이드레이션을 배웠습니다.
- Nuxt의
Lazy접두사는 컴포넌트를 지연해서 가져옵니다 - hydrateOnVisible — IntersectionObserver를 통해 화면 아래 영역에서 실행됩니다
- hydrateOnIdle — 중요하지 않은 작업을 유휴 시간에 실행합니다
- hydrateOnInteraction — 이벤트(클릭/포커스)에 의해 실행됩니다
- 핵심 Vue는
defineAsyncComponent에서 이러한 기능을hydrate도우미로 제공합니다
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“지연된 Hydration 전략” 강의는 무료인가요?
네 — “지연된 Hydration 전략” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“지연된 Hydration 전략”에서 뭘 배우나요?
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction()과 Nuxt 지연 Hydration을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“지연된 Hydration 전략” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.