Daten zwischen Sufeltekit zwischengespeichert werden

Mein vorheriger Beitrag gab einen allgemeinen Überblick über die Fähigkeiten von Seltekit. Dieser Beitrag befasst sich mit einem entscheidenden Aspekt der Webentwicklung: Caching . Wenn Sie es noch nicht getan haben, lesen Sie bitte meinen vorherigen Beitrag für den Kontext. Der vollständige Code und eine Live -Demo sind auf Github verfügbar.

Dieser Beitrag konzentriert sich auf eine effiziente Datenbehandlung. Wir werden grundlegende Suchfunktionen implementieren, die die Abfragezeichenfolge der Seite (mit den integrierten Funktionen von Sveltekit) verändert und den Loader der Seite neu belegt. Anstatt eine Datenbank wiederholt abzufragen, nutzen wir das Caching, um zuvor durchsuchte Daten schnell abzurufen. Wir werden Techniken zur Verwaltung des Cache -Ablaufs und zum kritischen Manuell -Cache -Invalidierung untersuchen. Schließlich werden wir nach einer Mutation zeigen, wie die Datenclient-Seite aktualisiert wird und gleichzeitig den Cache löscht.

Dies ist ein fortgeschritteneres Thema als gewöhnlich. Wir werden ähnliche Funktionen wie in Bibliotheken wie react-query implementieren, ohne sich jedoch auf externe Abhängigkeiten zu verlassen. Wir werden nur Webplattform -APIs und Sveltekit -Funktionen verwenden.

Während die Funktionen der Webplattform niedriger sind und mehr manuelle Anstrengungen erfordern, wird der Nutzen aufgrund des Fehlens externer Bibliotheken reduziert. Verwenden Sie diese Techniken jedoch nur, wenn dies absolut notwendig ist. Caching kann komplex und leicht misshandelt werden. Wenn Ihr Datenspeicher und Ihre Benutzeroberfläche genug auftretend sind, lassen Sie Seltekit direkt mit Daten abrufen - Einfachheit ist der Schlüssel. Dieser Beitrag liefert Lösungen, wenn das nicht mehr ausreicht.

Beachten Sie, dass react-query jetzt den schlechten Unterstützung hat! Wenn Sie häufig manuelles Zwischenspeichern benötigen, sollten Sie diese Bibliothek erkunden.

Setup

Wir werden unseren vorherigen Code so ändern, dass zusätzliche Sveltekit -Funktionen veranschaulichen.

Verschieben wir zuerst die Daten, die das Laden von page.server.js Loader auf eine API -Route laden. Erstellen Sie eine server.js -Datei in routes/api/todos und fügen Sie eine GET -Funktion hinzu:

import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData";

export async function GET({ url, setHeaders, request }) {
  const search = url.searchParams.get("search") || "";
  setHeaders({ "cache-control": "max-age=60" }); // Add caching header
  const todos = await getTodos(search);
  return json(todos);
}

Als nächstes können Sie den Seitenload von

nach page.server.js (oder page.js) umbenennen. Dies macht es zu einem universellen Lader, der sowohl auf Server als auch auf dem Client ausgeführt wird. Der clientseitige Abruf verwendet die native .ts -Funktion des Browsers. fetch

export async function load({ fetch, url, setHeaders }) {
  const search = url.searchParams.get("search") || "";
  const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}`);
  const todos = await resp.json();
  return { todos };
}

Fügen Sie der Seite

ein einfaches Suchformular hinzu: /list

<div>
  <label for="search">Search:</label>
  <input type="text" id="search" bind:value="{searchQuery}" on:keypress="{(e)"> { if (e.key === 'Enter') { navigate(`/list?search=${encodeURIComponent(searchQuery)}`) } }}>
</div>

nun wird ein Suchbegriff die Abfragezeichenfolge der URL aktualisiert, den Loader ausgelöst und auf To-Do-Elemente gesucht.

Erhöhen Sie schließlich die Verzögerung in

, um das Caching -Verhalten leicht zu beobachten: todoData.js

export const wait = async (amount) => new Promise((res) => setTimeout(res, amount ?? 500));

Der vollständige Code befindet sich auf GitHub.

grundlegendes Caching

Fügen wir unserem

-Dendspitze das Caching hinzu, indem Sie die Datei /api/todos ändern: server.js

import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData";

export async function GET({ url, setHeaders, request }) {
  const search = url.searchParams.get("search") || "";
  setHeaders({ "cache-control": "max-age=60" }); // Add caching header
  const todos = await getTodos(search);
  return json(todos);
}

Diese Caches -API fordert 60 Sekunden. Passen Sie diesen Wert nach Bedarf an. Betrachten Sie stale-while-revalidate für ausgefeiltere Caching -Strategien.

Jetzt lädt nachfolgende Suchanfragen innerhalb des 60-Sekunden-Fensters sofort aus dem Cache. Denken Sie daran, das Caching in den Entwicklerwerkzeugen Ihres Browsers zu deaktivieren, um das Caching -Verhalten zu beobachten.

cachesposition

Die anfängliche Serverlast wird auf dem Server abgerufen und an den Client gesendet. Sveltekit beobachtet den Cache-Control -Header und verwendet zwischengespeicherte Daten innerhalb des angegebenen Zeitrahmens. Client-Side-Suchanfragen verwendet den Cache des Browsers, das möglicherweise auch nach dem Nachladen von Seite (abhängig von der Cache-Busting-Implementierung) besteht.

.

cache Invalidierung

Um den Cache manuell ungültig zu machen, werden wir der URL einen Abfrage-Wert-Wert hinzufügen. Wir werden diesen Wert in einem Cookie speichern, das auf dem Server, aber auf dem Client lesbar ist.

layout.server.js Erstellen Sie eine

-Datei im Stammverschluss Ihres Routenordners:

export async function load({ fetch, url, setHeaders }) {
  const search = url.searchParams.get("search") || "";
  const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}`);
  const todos = await resp.json();
  return { todos };
}

httpOnly: false Dies stellt ein Cookie für die erste Anfrage fest und liest es auf nachfolgenden Anforderungen.

ermöglicht den clientseitigen Zugriff für Cache-Busting-Zwecke.

Cache -Werte lesen

document.cookie Unser Universal Loader muss diesen Cache -Wert unabhängig von der Ausführungsumgebung lesen. Auf dem Kunden werden wir

:

<div>
  <label for="search">Search:</label>
  <input type="text" id="search" bind:value="{searchQuery}" on:keypress="{(e)"> { if (e.key === 'Enter') { navigate(`/list?search=${encodeURIComponent(searchQuery)}`) } }}>
</div>

analysieren

Senden von Cache -Wert

/api/todos senden Sie diesen Wert nun an den Endpunkt

:

export const wait = async (amount) => new Promise((res) => setTimeout(res, amount ?? 500));

brechen Sie den Cache

Aktualisieren Sie den Cache-Busting-Wert in jeder Serveraktion mit:

setHeaders({ "cache-control": "max-age=60" });

Implementierung

/list Wir haben die notwendigen Primitiven behandelt. Lassen Sie uns nun sie integrieren. Wir werden der Seite

Bearbeitungsfunktionen hinzufügen. Fügen Sie diese Zeilen Ihrer Tabelle hinzu:

export function load({ cookies, isDataRequest }) {
  const initialRequest = !isDataRequest;
  const cacheValue = initialRequest ? +new Date() : cookies.get("todos-cache");
  if (initialRequest) {
    cookies.set("todos-cache", cacheValue, { path: "/", httpOnly: false });
  }
  return { todosCacheBust: cacheValue };
}

page.server.js Erstellen Sie eine /list -Datei im Ordner

:

export function getCookieLookup() {
  if (typeof document !== "object") {
    return {};
  }
  return document.cookie.split("; ").reduce((lookup, v) => {
    const parts = v.split("=");
    lookup[parts[0]] = parts[1];
    return lookup;
  }, {});
}

export const getCurrentCookieValue = (name) => {
  const cookies = getCookieLookup();
  return cookies[name] ?? "";
};

Dies behandelt die Einreichungen von Formular, aktualisiert das Aufgabenelement und löscht den Cache.

/todos Nach der Bearbeitung ruft ein Abruf zu

die aktualisierten Daten ab.

Sofortige Aktualisierungen

Um den Abruf nach dem Aufbau zu vermeiden, aktualisieren Sie die Benutzeroberfläche direkt. Ändern Sie den Loader, um einen beschreibbaren Speicher zurückzugeben:

import { getCurrentCookieValue } from "$lib/util/cookieUtils";

export async function load({ fetch, parent, url, setHeaders }) {
  const parentData = await parent();
  const cacheBust = getCurrentCookieValue("todos-cache") || parentData.todosCacheBust;
  const search = url.searchParams.get("search") || "";
  const resp = await fetch(`/api/todos?search=${encodeURIComponent(search)}&cache=${cacheBust}`);
  const todos = await resp.json();
  return { todos };
}

$todos Verwenden Sie {#each $todos as t} in Ihrer Vorlage:

. Aktualisieren Sie nun den Store direkt:

cookies.set("todos-cache", +new Date(), { path: "/", httpOnly: false });

Dies aktualisiert den Laden, ohne einen Neurender auszulösen. Der Cache wird gelöscht und Änderungen sind sofort sichtbar.

Der Code für sofortige Aktualisierungen befindet sich auf GitHub.

Reload -Funktion

Fügen wir eine Reload -Taste hinzu, um den Cache zu löschen und die aktuelle Abfrage neu zu laden. Fügen Sie eine Serveraktion hinzu:

<tr>
  <td><input type="text" bind:value="{t.title}" name="title"></td>
  <td><input type="hidden" name="id" value="{t.id}"></td>
  <td><button type="submit" form="edit-{t.id}">Save</button></td>
</tr>

und eine Form:

import { getTodo, updateTodo, wait } from "$lib/data/todoData";

export const actions = {
  async editTodo({ request, cookies }) {
    const formData = await request.formData();
    const id = formData.get("id");
    const newTitle = formData.get("title");
    await wait(250);
    updateTodo(id, newTitle);
    cookies.set("todos-cache", +new Date(), { path: "/", httpOnly: false });
  },
};

Um dies zu verbessern, fügen wir Feedback hinzu und steuern Sie die Invalidierung:

return { todos: writable(todos) };

invalidate Dies verwendet

, um zu steuern, was neu geladen wird, und verhindern unnötige Wiedererleber. Aktualisieren Sie den Loader:

import { json } from "@sveltejs/kit";
import { getTodos } from "$lib/data/todoData";

export async function GET({ url, setHeaders, request }) {
  const search = url.searchParams.get("search") || "";
  setHeaders({ "cache-control": "max-age=60" }); // Add caching header
  const todos = await getTodos(search);
  return json(todos);
}

Der Code für die Reload -Schaltfläche befindet sich auf GitHub.

Schlussfolgerung

In diesem Beitrag wurden fortgeschrittene Caching -Techniken in SELTEKIT untersucht. Denken Sie daran, diese nur bei Bedarf zu verwenden. Priorisieren Sie sauberen, einfachen Code und optimieren Sie nur, wenn die Leistung zu einem Problem wird. Ziel war es, Tools für die Optimierung zu liefern.

Das obige ist der detaillierte Inhalt vonDaten zwischen Sufeltekit zwischengespeichert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!