SvelteKit oferă un mecanism extrem de avansat pentru viteza de încărcare: poate preîncărca codul paginii și datele de pe server în momentul în care utilizatorul doar plasează cursorul mouse-ului peste un link (hover). În plus, funcțiile depends și invalidate permit reîmprospătarea selectivă doar a componentelor afectate.
Înregistrarea dependenței în +page.ts cu depends()
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ fetch, depends }) => {
// Înregistrăm o etichetă unică de dependență:
depends('date:utilizatori');
const res = await fetch('/api/utilizatori');
const utilizatori = await res.json();
return { utilizatori };
};Reîmprospătarea la cerere cu invalidate() și preloading pe link
<script lang="ts">
import { invalidate } from '$app/navigation';
let { data } = $props();
async function reincarcaUtilizatori() {
// Re-execută doar funcția load asociată etichetei 'date:utilizatori':
await invalidate('date:utilizatori');
}
</script>
<!-- Preîncărcare instantă la hover pe link: -->
<a href="/rapoarte" data-sveltekit-preload-data="hover">Vezi Rapoarte Detaliate</a>
<button onclick={reincarcaUtilizatori}>Actualizează Datele Acum</button>
Întrebări & Exemple de Cod:
Invalidarea Inteligentă a Cache-ului și Preîncărcarea în SvelteKit: invalidate și preloadDataAi o nelămurire despre utilizarea comenzii
Invalidarea Inteligentă a Cache-ului și Preîncărcarea în SvelteKit: invalidate și preloadDatasau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.