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中文网其他相关文章！