javascript / expert
Snippet
Nicht-blockierendes Daten-Streaming in SvelteKit
Experten-SvelteKit-Entwickler nutzen Daten-Streaming, um den Time to First Byte (TTFB) zu verbessern. Indem ein Promise in der Load-Funktion zurückgegeben wird, ohne darauf zu warten (await), sendet SvelteKit das initiale HTML sofort. Der Client löst das Promise dann auf und hydriert die spezifische Komponente, wodurch verhindert wird, dass langsame API-Aufrufe das Rendern der gesamten Seite blockieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
// src/routes/+page.server.jsexport const load = async () => {const slowPromise = new Promise((resolve) => {setTimeout(() => resolve({ value: 'Delayed Data' }), 3000);});return {immediate: 'Available instantly',streamed: slowPromise};};
svelte
Erklärung
1
const slowPromise = ...
Erstellt ein Promise, das eine lang laufende Operation wie eine Datenbankabfrage darstellt.
2
return { ... streamed: slowPromise }
Die direkte Rückgabe des Promises (ohne await) löst den Streaming-Mechanismus von SvelteKit aus.