Hydration progressiva
Esegua l'hydration solo sulle parti della pagina che richiedono interattività, per velocizzare il TTI.
Hydration progressiva è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Che cos'è l'hydration
L'hydration è il processo con cui si associa il comportamento JavaScript all'HTML renderizzato dal server nel browser.
Perché progressiva
L'hydration completa di pagine grandi richiede risorse della CPU. L'hydration progressiva dà priorità prima all'interattività critica.
Impostazioni predefinite di SvelteKit
SvelteKit esegue l'hydration per pagina, non per componente. Le route vengono sottoposte a hydration indipendentemente, quando necessario.
Architettura a isole
Combini il prerendering statico con l'hydration selettiva dei soli componenti interattivi.
Componenti lazy
Utilizzi import() dinamico per i componenti non critici, così da posticiparne il caricamento.
const Comments = await import("./Comments.svelte");Intersection Observer
Esegua l'hydration dei widget below-the-fold quando entrano nell'area visibile durante lo scorrimento.
Utilizzare le action
Racchiuda il caricamento lazy in una action Svelte per poterlo riutilizzare.
Vantaggi in termini di prestazioni
TTI più basso, payload JavaScript iniziale più piccolo e interattività iniziale più rapida.
Compromessi
L'hydration posticipata può ritardare l'interattività delle parti rinviate. Pianifichi con attenzione.
SSR + hydration
SSR fornisce il rendering iniziale; l'hydration aggiunge il comportamento JavaScript.
Confronto tra framework
Astro e Qwik hanno reso popolari gli approcci a isole e resumable; SvelteKit offre strumenti simili da configurare manualmente.
Verifica rapida
Che cos'è l'hydration progressiva?
Riepilogo
Posticipi l'hydration dei componenti non critici utilizzando import dinamici e Intersection Observer per ottenere un TTI più rapido.
Domande Frequenti
La lezione «Hydration progressiva» è gratuita?
Sì — il testo completo di «Hydration progressiva» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Hydration progressiva»?
Esegua l'hydration solo sulle parti della pagina che richiedono interattività, per velocizzare il TTI. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Hydration progressiva»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Streaming dei dati con le Promise in load
- Caricamento differito e UX simile a Suspense
- Streaming dal server con +server.js
- Hydration progressiva