+page.js-load-Funktion
Exportieren Sie eine load-Funktion, um Daten abzurufen oder zu berechnen, bevor die Seite gerendert wird.
+page.js-load-Funktion 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 load-Funktionen
SvelteKit muss wissen, welche Daten Ihre Seite benötigt, damit sie vor dem Rendern abgerufen werden können. Die load-Funktion stellt diese Daten bereit.
Dateispeicherort
Erstellen Sie +page.js neben +page.svelte im selben Ordner.
load exportieren
Exportieren Sie eine Funktion mit dem Namen load.
export async function load({ params, fetch }) {
const res = await fetch("/api/items");
return { items: await res.json() };
}Asynchronität erlaubt
load-Funktionen können asynchron sein. SvelteKit wartet vor dem Rendern auf sie.
Zurückgegebene Daten
Alles, was Sie zurückgeben, wird der Seite als data-Prop bereitgestellt.
fetch verwenden
Verwenden Sie das von der load-Funktion bereitgestellte fetch. Es verarbeitet SSR und Anmeldedaten korrekt.
Auf params zugreifen
Dynamische Route-Parameter befinden sich in params.
export function load({ params }) { return { slug: params.slug }; }Zuerst serverseitig ausgeführt
Bei initialen Anfragen wird load auf dem Server ausgeführt, bei nachfolgenden Navigationen auf dem Client.
Universal oder nur Server
+page.js wird an beiden Orten ausgeführt; +page.server.js nur auf dem Server.
Caching
Verwenden Sie HTTP-Header und den Cache der Plattform, um load-Funktionen effizient zu gestalten.
Streaming
Geben Sie in verschachtelten Eigenschaften Promises zurück, um Daten zu streamen, ohne das initiale HTML zu blockieren.
Schnelltest
Was gibt load zurück?
Zusammenfassung
Exportieren Sie load aus +page.js, um Daten abzurufen oder zu berechnen. Die Rückgabe wird zum data-Prop der Seite.
Häufig gestellte Fragen
Ist die Lektion „+page.js-load-Funktion“ kostenlos?
Ja — der vollständige Text von „+page.js-load-Funktion“ 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 „+page.js-load-Funktion“?
Exportieren Sie eine load-Funktion, um Daten abzurufen oder zu berechnen, bevor die Seite gerendert wird. 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 „+page.js-load-Funktion“?
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
- +page.js-load-Funktion
- Daten zurückgeben und $page.data verwenden
- Fehlerbehandlung in load
- +page.server.js für serverseitige Logik