SvelteKit für Einsteiger: Der ultimative Guide zum Thema „basic fetching” von Daten

Willkommen zu diesem umfassenden Guide, der sich an Einsteiger richtet, die mit SvelteKit arbeiten und lernen möchten, wie man auf einfache Art und Weise Daten abruft. SvelteKit ist ein fantastisches Framework zum Aufbau schneller und performanter Webanwendungen, und das Abrufen von Daten ist ein Kernbestandteil vieler moderner Webanwendungen. Keine Sorge, wir werden alles Schritt für Schritt durchgehen, damit du am Ende des Artikels ein solides Verständnis davon hast, wie Fetching in SvelteKit funktioniert.

Was ist SvelteKit und warum ist Fetching so wichtig?

SvelteKit ist ein Framework zum Aufbau von Webanwendungen mit Svelte. Es bietet Funktionen wie Server-Side Rendering (SSR), automatische Code-Splitting, optimiertes Routing und vieles mehr. Das bedeutet, dass deine Anwendungen nicht nur schnell laufen, sondern auch von Suchmaschinen gut indexiert werden.

Fetching ist der Prozess, Daten von einem Server oder einer API abzurufen. Stell dir vor, du baust eine Anwendung, die die aktuellen Wetterdaten anzeigt. Diese Daten müssen von einem externen Dienst abgerufen werden. Genau hier kommt das Fetching ins Spiel. Ohne Fetching wären deine Anwendungen statisch und könnten keine dynamischen Informationen anzeigen.

Grundlagen des Fetchings in SvelteKit

In SvelteKit gibt es mehrere Möglichkeiten, Daten abzurufen. Eine der gängigsten Methoden ist die Verwendung der fetch-Funktion direkt in deinen Svelte-Komponenten oder in den sogenannten „load”-Funktionen. Wir werden uns hier auf das Fetch API konzentrieren, da es die Standardmethode in JavaScript ist.

Die fetch-Funktion

Die fetch-Funktion ist eine eingebaute JavaScript-Funktion, die es dir ermöglicht, HTTP-Anfragen zu stellen. Hier ist ein einfaches Beispiel, wie du sie in einer Svelte-Komponente verwenden kannst:

<script>
  let data;
  let loading = true;
  let error;

  async function fetchData() {
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      data = await res.json();
      loading = false;
    } catch (e) {
      error = e;
      loading = false;
    }
  }

  fetchData();
</script>

{#if loading}
  <p>Lade Daten...</p>
{:else if error}
  <p>Fehler beim Laden der Daten: {error.message}</p>
{:else}
  <h1>{data.title}</h1>
  <p>User ID: {data.userId}</p>
  <p>Completed: {data.completed}</p>
{/if}

Was passiert hier?

1. Wir definieren drei Variablen: data, loading und error. data wird die abgerufenen Daten speichern, loading wird verwendet, um den Ladezustand anzuzeigen, und error wird verwendet, um Fehler zu speichern.
2. Wir definieren eine asynchrone Funktion fetchData, die die fetch-Funktion verwendet, um Daten von der URL ‘https://jsonplaceholder.typicode.com/todos/1’ abzurufen.
3. await fetch(...) wartet, bis die Antwort vom Server eintrifft.
4. await res.json() parst die Antwort in ein JSON-Objekt.
5. Wir setzen data auf das geparste JSON-Objekt und loading auf false.
6. Im Fehlerfall fangen wir den Fehler mit einem try...catch-Block ab und setzen error auf den Fehler und loading ebenfalls auf false.
7. Im Markup verwenden wir Svelte’s Conditional Rendering ({#if}, {:else if}, {:else}), um entweder eine Ladeanzeige, eine Fehlermeldung oder die abgerufenen Daten anzuzeigen.

Fetching in +page.svelte und +page.server.js (oder +page.js)

SvelteKit bietet einen speziellen Ansatz für das Abrufen von Daten, der besonders nützlich ist, wenn du Server-Side Rendering (SSR) nutzen möchtest. Du kannst Daten innerhalb von +page.server.js (oder +page.js für Client-Side Fetching) Dateien abrufen und diese Daten dann an deine +page.svelte Komponente übergeben.

Server-Side Fetching (+page.server.js)

Hier ist ein Beispiel für eine +page.server.js Datei:

// src/routes/+page.server.js
export async function load({ fetch }) {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json();

  return {
    props: {
      todo: data
    }
  };
}

In diesem Beispiel definieren wir eine load-Funktion, die ein Objekt zurückgibt, das die props enthält. Die props werden dann an die zugehörige +page.svelte Komponente übergeben. Beachte den fetch Parameter, der automatisch von SvelteKit bereitgestellt wird.

Client-Side Fetching (+page.js)

Wenn du Daten clientseitig abrufen möchtest, kannst du eine +page.js Datei anstelle von +page.server.js verwenden. Der Code ist sehr ähnlich, aber er wird im Browser ausgeführt.

// src/routes/+page.js
export async function load({ fetch }) {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json();

  return {
    todo: data
  };
}

Der Hauptunterschied besteht darin, dass der Code in +page.js im Browser ausgeführt wird, während der Code in +page.server.js auf dem Server ausgeführt wird. Wenn die Daten, die abgerufen werden sollen, privat sein müssen (z.B. API-Schlüssel), sollte +page.server.js verwendet werden, um zu verhindern, dass der API-Schlüssel für den Client sichtbar wird.

Verwenden der Daten in der Svelte-Komponente (+page.svelte)

In deiner +page.svelte Komponente kannst du dann auf die Daten zugreifen, die von der load-Funktion übergeben wurden:

<script>
  export let todo;
</script>

<h1>{todo.title}</h1>
<p>User ID: {todo.userId}</p>
<p>Completed: {todo.completed}</p>

Beachte, dass wir mit export let todo; eine Prop definieren, die den von der load-Funktion zurückgegebenen todo-Wert empfängt. Dieser Ansatz ist viel sauberer und organisierter als das direkte Abrufen von Daten in der Komponente, besonders wenn du Server-Side Rendering nutzt.

Best Practices für das Fetching in SvelteKit

• Fehlerbehandlung: Stelle sicher, dass du Fehler beim Abrufen von Daten abfängst und dem Benutzer eine aussagekräftige Fehlermeldung anzeigst. Verwende try...catch-Blöcke, um HTTP-Fehler (z.B. 404, 500) zu behandeln.
• Ladezustand: Zeige dem Benutzer einen Ladezustand an, während die Daten abgerufen werden. Das kann ein einfacher Lade-Spinner oder eine Textnachricht sein.
• Caching: Nutze Browser-Caching oder SvelteKit’s eigene Caching-Mechanismen, um unnötige Anfragen an den Server zu vermeiden und die Performance zu verbessern.
• Umgebungs-Variablen: Speichere sensible Daten wie API-Schlüssel in Umgebungsvariablen und greife mit process.env.API_KEY darauf zu. Achte darauf, die Variablen in .env-Dateien zu speichern und diese nicht in dein Git-Repository einzuchecken.
• Fetch API Optionen: Nutze die Optionen der Fetch API (z.B. method, headers, body), um komplexere Anfragen zu stellen (z.B. POST-Anfragen mit JSON-Daten).

Zusammenfassung

In diesem Guide haben wir die Grundlagen des Fetchings von Daten in SvelteKit behandelt. Wir haben gelernt, wie man die fetch-Funktion direkt in Svelte-Komponenten verwendet und wie man die load-Funktionen in +page.server.js (und +page.js) nutzt, um Daten abzurufen und an die Komponenten zu übergeben. Wir haben auch einige Best Practices besprochen, um das Fetching effizienter und robuster zu gestalten.

Mit diesem Wissen bist du bestens gerüstet, um dynamische Webanwendungen mit SvelteKit zu erstellen! Viel Erfolg beim Programmieren!