Daten-Streaming mit Promises in load
Geben Sie nicht aufgelöste Promises aus load zurück, um Daten nach dem initialen HTML zu streamen.
Daten-Streaming mit Promises in load ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Streaming
Beim Streaming kann die Seite gerendert werden, bevor langsame Daten verfügbar sind. Dadurch verbessert sich die wahrgenommene Performance.
Promises zurückgeben
Geben Sie Daten zurück, deren einige Eigenschaften noch nicht aufgelöste Promises sind.
export async function load() {
return {
fast: getFastData(),
slow: getSlowData() // promise, not awaited
};
}Await im Markup
Verwenden Sie {#await} in der Seite, um das gestreamte Promise zu verarbeiten.
{#await data.slow}
<p>Loading...</p>
{:then result}
<p>{result}</p>
{/await}Initiales HTML
Die schnellen Daten werden sofort gerendert; die langsamen Daten werden ergänzt, sobald sie verfügbar sind.
Suspense-ähnliche UX
Zeigen Sie Skeletons oder Spinner an, während Daten gestreamt werden.
Mehrere gestreamte Eigenschaften
Streamen Sie mehrere Eigenschaften unabhängig voneinander; jede wird nach ihrem eigenen Zeitplan aufgelöst.
Fehler in Streams
Verwenden Sie {:catch} im await-Block, um eine Ablehnung zu verarbeiten.
Server erforderlich
Streaming beim Laden funktioniert nur, wenn SSR aktiviert ist.
Keine Einschränkungen durch den Adapter
Die meisten Adapter wie node, vercel und cloudflare unterstützen Streaming.
Typsicherheit
Durch die Rückgabe von Promise<T>-Werten bleiben die Typen in der data-Prop korrekt.
Wann verwenden
Für langsame APIs, KI-generierte Inhalte und große Abfragen – also für alles, was das erste Rendering nicht blockieren sollte.
Kurze Überprüfung
Was geschieht, wenn Sie aus load ein Promise zurückgeben, ohne darauf zu warten?
Zusammenfassung
Streamen Sie, indem Sie nicht aufgelöste Promises aus load zurückgeben, und verarbeiten Sie sie im Markup mit {#await}.
Häufig gestellte Fragen
Ist die Lektion „Daten-Streaming mit Promises in load“ kostenlos?
Ja — der vollständige Text von „Daten-Streaming mit Promises in load“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Daten-Streaming mit Promises in load“?
Geben Sie nicht aufgelöste Promises aus load zurück, um Daten nach dem initialen HTML zu streamen. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Daten-Streaming mit Promises in load“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Daten-Streaming mit Promises in load
- Verzögertes Laden und Suspense-ähnliche UX
- Streaming vom Server mit +server.js
- Progressive Hydration