Estratégias de hidratação adiada
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hidratação lenta no Nuxt.
Estratégias de hidratação adiada é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O problema do custo da hidratação
O SSR envia HTML pronto para ser visualizado, mas o cliente ainda precisa hidratar cada componente para torná-lo interativo. Hidratar tudo de uma vez bloqueia a thread principal e atrasa a interatividade (TTI).
A hidratação adiada (sob demanda) posterga a hidratação dos componentes até que eles sejam realmente necessários.
Prefixo Auto-Lazy do Nuxt
No Nuxt, prefixar um componente com Lazy faz com que ele seja importado sob demanda. Combinado com estratégias de hidratação, isso adia tanto o download de JS quanto o trabalho de hidratação.
<template>
<!-- Nuxt resolves LazyMyComponent automatically -->
<LazyMyComponent />
</template>hydrateOnVisible
hydrateOnVisible hidrata um componente somente quando ele entra na área visível durante a rolagem, usando um IntersectionObserver internamente. É perfeito para seções abaixo da dobra.
<template>
<!-- Nuxt syntax: hydrate when visible -->
<LazyProductReviews hydrate-on-visible />
</template>
<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->hydrateOnVisible com margem
Você pode passar opções de IntersectionObserver para que a hidratação comece um pouco antes de o elemento ficar visível, tornando a experiência mais fluida.
<template>
<!-- start hydrating 100px before entering viewport -->
<LazyComments
:hydrate-on-visible="{ rootMargin: '100px' }"
/>
</template>hydrateOnIdle
hydrateOnIdle aguarda o navegador ficar ocioso (por meio de requestIdleCallback) antes de hidratar. Use-o para componentes não essenciais que não devem competir com a interatividade inicial.
<template>
<!-- hydrate during idle time -->
<LazyNewsletterSignup hydrate-on-idle />
<!-- optional max timeout in ms -->
<LazyChatBubble :hydrate-on-idle="3000" />
</template>hydrateOnInteraction
hydrateOnInteraction adia a hidratação até que um evento específico do DOM seja disparado no elemento (clique, foco, passar o mouse). O componente permanece como HTML estático até que o usuário interaja.
<template>
<!-- hydrate only on click -->
<LazyDropdownMenu hydrate-on-interaction="click" />
<!-- multiple events -->
<LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>hydrateOnMediaQuery
hydrateOnMediaQuery hidrata somente quando uma consulta de mídia corresponde — por exemplo, hidratando uma barra lateral exclusiva para computadores que fica oculta em dispositivos móveis e evitando trabalho desperdiçado em telas pequenas.
<template>
<!-- only hydrate on wide screens -->
<LazyDesktopSidebar
hydrate-on-media-query="(min-width: 1024px)"
/>
</template>API principal do Vue: auxiliares de hidratação
Fora do Nuxt, as mesmas estratégias existem como auxiliares de hidratação passados à opção hydrate de defineAsyncComponent. Os prefixos do Nuxt são apenas uma forma abreviada dessas estratégias.
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const LazyChart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
hydrate: hydrateOnVisible()
})Escolhendo a estratégia certa
Associe a estratégia à intenção:
- Visível — conteúdo abaixo da dobra (avaliações, rodapés)
- Ocioso — componentes em segundo plano (análise de dados, boletim informativo)
- Interação — interface revelada por uma ação do usuário (menus, modais)
- Consulta de mídia — interface específica para cada dispositivo
Pontos de atenção sobre as concessões
A hidratação adiada melhora o TTI, mas significa que o componente não é interativo até que seu gatilho seja acionado. Nas estratégias baseadas em interação, o primeiro clique é consumido para acionar a hidratação e pode parecer um pouco atrasado. Reserve a hidratação imediata para as principais interfaces de chamada para ação.
Combinação com ilhas
A hidratação adiada combina-se com a arquitetura de ilhas: a maior parte da página é HTML estático renderizado no servidor, e somente as ilhas interativas são hidratadas — de forma tardia, conforme a estratégia. O resultado é um volume mínimo de JS no cliente e uma interatividade rápida onde ela é importante.
<template>
<StaticArticle /> <!-- never hydrates -->
<LazyCommentBox hydrate-on-visible />
<LazyLikeButton hydrate-on-interaction="click" />
</template>Verificação rápida
Teste sua compreensão das estratégias de hidratação.
Recapitulação
Você aprendeu sobre hidratação adiada:
- O prefixo
Lazydo Nuxt importa componentes de forma tardia - hydrateOnVisible — conteúdo abaixo da área visível, usando IntersectionObserver
- hydrateOnIdle — conteúdo não essencial, durante o tempo ocioso
- hydrateOnInteraction — acionada por eventos (clique/foco)
- O Vue principal expõe esses recursos auxiliares de
hydrateemdefineAsyncComponent
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Estratégias de hidratação adiada” é grátis?
Sim — o texto completo de “Estratégias de hidratação adiada” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Estratégias de hidratação adiada”?
hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hidratação lenta no Nuxt. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Estratégias de hidratação adiada”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Componente Vue Suspense
- Componentes assíncronos com defineAsyncComponent
- SSR em fluxo com renderToWebStream
- Estratégias de hidratação adiada