Hidratação progressiva
Hidrate apenas as partes da página que precisam de interatividade para obter um TTI mais rápido.
Hidratação progressiva é uma aula grátis de Sveltejs 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
O que é hidratação
Hidratação é o processo de associar o comportamento de JS ao HTML renderizado pelo servidor no navegador.
Por que progressiva
A hidratação completa de páginas grandes consome CPU. A hidratação progressiva prioriza primeiro a interatividade essencial.
Padrões do SvelteKit
O SvelteKit hidrata por página, não por componente. As rotas são hidratadas de forma independente conforme necessário.
Arquitetura de ilhas
Combine pré-renderização estática com a hidratação seletiva apenas dos componentes interativos.
Componentes sob demanda
Use import() dinâmico para componentes não essenciais e adie o carregamento deles.
const Comments = await import("./Comments.svelte");Observador de interseção
Hidrate os widgets abaixo da primeira tela quando eles entrarem na área visível durante a rolagem.
Usar ações
Envolva o carregamento sob demanda em uma ação do Svelte para reutilizá-lo.
Ganhos de desempenho
TTI menor, carga inicial de JS menor e interatividade inicial mais rápida.
Compromissos
A hidratação adiada pode atrasar a interatividade das partes adiadas. Planeje com cuidado.
SSR e hidratação
SSR fornece a renderização inicial; a hidratação adiciona o comportamento de JS por cima dela.
Comparação entre estruturas
Astro e Qwik popularizaram as abordagens de ilhas e retomáveis; o SvelteKit oferece ferramentas semelhantes manualmente.
Verificação rápida
O que é hidratação progressiva?
Revisão
Adie a hidratação de componentes não essenciais usando importações dinâmicas e observadores de interseção para obter um TTI mais rápido.
Perguntas Frequentes
A aula “Hidratação progressiva” é grátis?
Sim — o texto completo de “Hidratação progressiva” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Hidratação progressiva”?
Hidrate apenas as partes da página que precisam de interatividade para obter um TTI mais rápido. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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 “Hidratação progressiva”?
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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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
- Transmissão de dados com promises em load
- Carregamento adiado e experiência semelhante a Suspense
- Transmissão do servidor com +server.js
- Hidratação progressiva