Data caching di sveltekit

Pos sebelumnya saya memberikan gambaran umum tentang keupayaan Sveltekit. Siaran ini menyelidiki aspek penting pembangunan web:

Caching . Sekiranya anda belum melakukannya, sila baca catatan saya sebelumnya untuk konteks. Kod lengkap dan demo langsung boleh didapati di GitHub.

Jawatan ini memberi tumpuan kepada pengendalian data yang cekap. Kami akan melaksanakan fungsi carian asas yang mengubah rentetan pertanyaan halaman (menggunakan ciri terbina dalam Sveltekit) dan mencetuskan semula pemuat halaman. Daripada berulang kali menanyakan pangkalan data, kami akan memanfaatkan caching dengan cepat mengambil data yang dicari sebelum ini. Kami akan meneroka teknik untuk menguruskan tamat tempoh cache dan, secara kritikal, pembatalan cache manual. Akhirnya, kami akan menunjukkan cara mengemas kini data pelanggan selepas mutasi sementara pada masa yang sama membersihkan cache.

Ini adalah topik yang lebih maju daripada biasa. Kami akan melaksanakan ciri -ciri yang serupa dengan yang terdapat di perpustakaan seperti

, tetapi tanpa bergantung kepada kebergantungan luaran. Kami hanya akan menggunakan API Platform Web dan ciri -ciri Sveltekit. react-query

Walaupun ciri-ciri platform web adalah tahap yang lebih rendah, yang memerlukan lebih banyak usaha manual, manfaatnya dikurangkan saiz bundle kerana ketiadaan perpustakaan luaran.

Walau bagaimanapun, hanya menggunakan teknik -teknik ini apabila benar -benar diperlukan. Caching boleh menjadi rumit dan mudah salah. Jika kedai data dan UI anda cukup prestasi, biarkan Sveltekit mengendalikan data yang diambil secara langsung - kesederhanaan adalah kunci. Jawatan ini menyediakan penyelesaian untuk apabila itu tidak lagi mencukupi.

Perhatikan bahawa

kini mempunyai sokongan svelte! Jika anda sering memerlukan caching manual, pertimbangkan untuk meneroka perpustakaan ini. react-query

persediaan

kami akan mengubah suai kod terdahulu kami untuk menggambarkan ciri sveltekit tambahan.

Pertama, mari kita gerakkan pemuatan data dari loader

ke laluan API. Buat fail page.server.js dalam server.js dan tambahkan fungsi GET: routes/api/todos

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);
}

Seterusnya, namakan semula Loader halaman dari

ke page.server.js (atau page.js). Ini menjadikannya loader sejagat, berjalan pada kedua -dua pelayan dan klien. Pengambilan sisi klien akan menggunakan fungsi penyemak imbas .ts. 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 };
}

tambahkan borang carian mudah ke halaman

: /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>

Sekarang, memasukkan istilah carian akan mengemas kini rentetan pertanyaan URL, mencetuskan loader dan mencari item tugasan.

Akhirnya, tingkatkan kelewatan

dengan mudah memerhatikan tingkah laku caching: todoData.js

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

kod penuh di GitHub.

Caching Asas

mari tambahkan caching ke titik akhir

kami dengan mengubah fail /api/todos: 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);
}

Cache ini API panggilan selama 60 saat. Laraskan nilai ini seperti yang diperlukan. Pertimbangkan stale-while-revalidate untuk strategi caching yang lebih canggih.

Sekarang, carian berikutnya dalam tetingkap 60 saat akan dimuatkan dengan serta-merta dari cache. Ingatlah untuk melumpuhkan caching dalam alat pemaju penyemak imbas anda untuk memerhatikan tingkah laku caching.

Lokasi cache

Beban yang diberikan pelayan awal diambil pada pelayan dan dihantar kepada klien. Sveltekit mengamati pengepala Cache-Control dan menggunakan data cache dalam jangka masa yang ditentukan. Carian sisi pelanggan akan menggunakan cache penyemak imbas, yang berpotensi berterusan walaupun selepas memuat semula halaman (bergantung kepada pelaksanaan cache-busting).

Pembatalan cache

Untuk membatalkan cache secara manual, kami akan menambah nilai pertanyaan kepada URL. Kami akan menyimpan nilai ini dalam kuki, diselesaikan pada pelayan tetapi boleh dibaca pada klien.

Buat fail layout.server.js di akar folder laluan anda:

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 };
}

Ini menetapkan kuki pada permintaan awal dan membacanya pada permintaan berikutnya. httpOnly: false membolehkan akses sisi pelanggan untuk tujuan cache.

Membaca nilai cache

Loader Universal kami perlu membaca nilai cache ini tanpa mengira persekitaran pelaksanaan. Pada pelanggan, kami akan menghuraikan document.cookie:

<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>

Menghantar nilai cache

Sekarang, hantar nilai ini ke titik akhir /api/todos:

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

Busting cache

Kemas kini nilai cache-busting dalam mana-mana tindakan pelayan menggunakan:

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

pelaksanaan

kami telah meliputi primitif yang diperlukan. Sekarang, mari kita mengintegrasikannya. Kami akan menambah fungsi penyuntingan ke halaman /list. Tambahkan baris ini ke meja anda:

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 };
}

Buat fail page.server.js dalam folder /list:

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] ?? "";
};

ini mengendalikan penyerahan bentuk, mengemas kini item tugasan, dan membersihkan cache.

selepas mengedit, pengambilan ke /todos mengambil data yang dikemas kini.

Kemas kini segera

Untuk mengelakkan pengambilan pasca edit, kemas kini UI secara langsung. Ubah suai loader untuk mengembalikan kedai yang boleh ditulis:

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 };
}

Gunakan $todos dalam template anda: {#each $todos as t}. Sekarang, kemas kini kedai secara langsung:

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

ini mengemas kini kedai tanpa mencetuskan semula. Cache dibersihkan, dan perubahan dapat dilihat dengan segera.

Kod untuk kemas kini segera adalah di GitHub.

fungsi tambah nilai

Mari tambahkan butang tambah nilai untuk membersihkan cache dan muat semula pertanyaan semasa. Tambahkan tindakan pelayan:

<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>

dan bentuk:

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 });
  },
};

untuk memperbaiki ini, mari tambahkan maklum balas dan kawalan pembatalan:

return { todos: writable(todos) };

ini menggunakan invalidate untuk mengawal apa yang dimuat semula, menghalang pelaku semula yang tidak perlu. Kemas kini 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);
}

Kod untuk butang tambah nilai di GitHub.

Kesimpulan

Pos ini meneroka teknik caching maju di Sveltekit. Ingatlah untuk menggunakannya hanya apabila perlu. Mengutamakan kod yang bersih, mudah dan mengoptimumkan hanya apabila prestasi menjadi masalah. Matlamatnya adalah untuk menyediakan alat untuk apabila pengoptimuman benar -benar diperlukan.

Atas ialah kandungan terperinci Data caching di sveltekit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!