Sveltekit中的緩存數據

我以前的帖子提供了Sveltekit功能的一般概述。這篇文章深入研究了Web開發的關鍵方面：緩存。 如果您還沒有，請閱讀我以前的文章以獲取上下文。完整的代碼和一個實時演示可在GitHub上獲得。

這篇文章專注於有效的數據處理。我們將實現基本搜索功能，以修改頁面的查詢字符串（使用Sveltekit的內置功能），並重新啟動頁面的加載程序。我們沒有反複查詢數據庫，而是利用緩存來快速檢索先前搜索的數據。我們將探討用於管理緩存到期的技術，並至關重要的是手動緩存無效。 最後，我們將演示突變後如何更新數據客戶端，同時清除高速緩存。

這是一個比平常更高級的話題。我們將實現類似於

>庫中的功能，但不依賴外部依賴性。我們將僅使用Web Platform API和Sveltekit功能。 react-query

> Web平台的功能較低，需要更多的手動努力，但由於缺乏外部庫，捆綁尺寸會降低。 但是，只有在絕對必要的情況下才使用這些技術。

緩存可能很複雜且容易犯錯。 如果您的數據存儲和UI表現足夠，請讓Sveltekit直接處理數據獲取 - 簡單是關鍵。這篇文章為何時不再足夠的解決方案提供了解決方案。 > 請注意，

現在有苗條的支持！如果您經常需要手動緩存，請考慮探索此庫。

react-query>設置

我們將修改以前的代碼以說明其他Sveltekit功能。

首先，讓我們將數據加載從

加載器移動到API路由。在

>中創建一個

>文件，然後添加一個get函數： page.server.js> server.js 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);
}

>（或

）。這使其成為通用加載程序，在服務器和客戶端上運行。 客戶端獲取將使用瀏覽器的本機 page.server.js函數。 page.js> .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 };
}

/list現在，輸入搜索詞將更新URL的查詢字符串，觸發加載程序並蒐索待辦事項。 >

最後，增加

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

中的延遲以輕鬆觀察緩存行為：

完整的代碼在github上。 todoData.js>

基本緩存

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

>讓我們通過修改

file：

來將緩存添加到我們的

端點

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

這個緩存的API呼叫60秒。根據需要調整此值。考慮更複雜的緩存策略。 現在，在60秒內的窗口中的後續搜索將立即從緩存中加載。 切記在瀏覽器的開發人員工具中禁用緩存以觀察緩存行為。 stale-while-revalidate緩存位置

初始服務器渲染的負載在服務器上獲取並發送到客戶端。 Sveltekit觀察

標題，並在指定的時間範圍內使用緩存的數據。 客戶端搜索將使用瀏覽器的緩存，即使在頁面重新加載後也可能會持續存在（取決於阻止緩存的實現）。

>

>緩存無效

Cache-Control>為了手動使緩存無效，我們將為URL添加一個破壞性的值。我們將將此值存儲在cookie中，可在服務器上進行設置，但在客戶端上可讀。

>

在路由文件夾的根部創建

文件：>

>這將在初始請求中設置一個cookie，並在後續請求中讀取它。

>允許客戶端訪問用於緩存的目的。 layout.server.js讀取緩存值

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>

發送緩存值

現在，將此值發送到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>

破壞緩存

>使用以下方式更新任何服務器操作中的緩存值 /api/todos

實現

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

>我們已經涵蓋了必要的原語。現在，讓我們整合它們。 我們將添加編輯功能到

頁面。將這些行添加到您的表格：

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

在

>文件夾中創建

文件：>

/list此處理表單提交，更新待辦事項項目並清除緩存。

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即時更新/list 為了避免使用後提取，請直接更新UI。 修改加載程序以返回可寫的商店：

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

>在您的模板中使用

：

。 現在，直接更新商店：/todos

>這會在不觸發重新渲染的情況下更新商店。 清除緩存，並立即可見更改。

即時更新的代碼在github上。

>

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>讓我們添加一個重新加載按鈕以清除緩存並重新加載當前查詢。 添加服務器操作：{#each $todos as t}

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

和一個表格：

為了改善這一點，讓我們添加反饋和控制無效：>

這使用

來控制重新加載的內容，以防止不必要的重新租賃。 更新加載程序：

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

重新加載按鈕的代碼在github上。

結論

這篇文章探索了Sveltekit中的高級緩存技術。 切記僅在必要時使用這些。 優先考慮乾淨，簡單的代碼，並僅在性能成為問題時進行優化。 目的是提供真正需要優化的工具。

以上是Sveltekit中的緩存數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！