Sveltekitのキャッシュデータ

私の以前の投稿は、Sveltekitの機能の一般的な概要を提供しました。この投稿は、Web開発の重要な側面を掘り下げています：キャッシュ。 まだおかしい場合は、コンテキストについては以前の投稿をお読みください。完全なコードとライブデモはGitHubで利用できます。

この投稿は、効率的なデータ処理に焦点を当てています。ページのクエリ文字列（Sveltekitの組み込み機能を使用）を変更し、ページのローダーを再登録する基本的な検索機能を実装します。データベースを繰り返しクエリする代わりに、キャッシュを活用して、以前に検索したデータをすばやく取得します。キャッシュの有効期限を管理するための手法と、批判的に手動のキャッシュの無効化を検討します。 最後に、キャッシュをクリアしながら、突然変異の後にクライアント側を更新する方法を示します。

これは通常よりも高度なトピックです。外部依存関係に依存することなく、

などのライブラリにあるものと同様の機能を実装します。 WebプラットフォームAPIとSvelteKit機能のみを使用します

Webプラットフォームの機能は低レベルであり、より手動での努力が必要ですが、外部ライブラリがないため、利点はバンドルサイズを縮小します。 ただし、絶対に必要な場合にのみこれらの手法を使用してください。react-queryキャッシングは複雑で、簡単に管理される可能性があります。 データストアとUIが十分にパフォーマンスがある場合は、Sveltekitを直接処理してください。シンプルさが重要です。この投稿は、それがもはや十分ではないときの解決策を提供します。

にはサポートがあります！手動キャッシュが頻繁に必要な場合は、このライブラリの探索を検討してください。 セットアップ まず、データの読み込みを

ローダーからAPIルートに移動しましょう。 react-queryファイルを作成して

にファイルを作成し、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);
}

ここで、検索用語を入力すると、URLのクエリ文字列が更新され、ローダーがトリガーされ、To Doアイテムが検索されます。 page.server.js最後に、キャッシングの動作を簡単に観察するために page.jsの遅延を増やしてください：.ts fetch

完全なコードはgithubにあります。

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

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

ファイルを変更して、

エンドポイントにキャッシングを追加しましょう：

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秒間呼び出します。必要に応じてこの値を調整します。より洗練されたキャッシング戦略については、stale-while-revalidateを検討してください。

さて、60秒のウィンドウ内の後続の検索は、キャッシュから即座にロードされます。 ブラウザの開発者ツールでキャッシュを無効にして、キャッシュ動作を観察することを忘れないでください。

キャッシュの場所

最初のサーバーレンダリングロードがサーバー上にフェッチされ、クライアントに送信されます。 Sveltekitは

ヘッダーを観察し、指定された時間枠内でキャッシュデータを使用します。 クライアント側の検索では、ブラウザのキャッシュが使用され、ページリロード後も持続する可能性があります（キャッシュバストの実装に応じて）。 Cache-Controlキャッシュ無効

キャッシュを手動で無効にするには、URLにクエリバスト値を追加します。この値は、サーバーに設定できるが、クライアントで読みやすいCookieに保存します。

ルートフォルダーのルートで

ファイルを作成します：

layout.server.jsこれにより、最初のリクエストでCookieを設定し、その後のリクエストで読み取ります。

では、キャッシュバストの目的でクライアント側のアクセスを許可します

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>

endpoint：

に送信します

キャッシュをつぶします/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 };
}

これにより、フォームの送信を処理し、to-doアイテムを更新し、キャッシュをクリアします。

編集後、更新されたデータを取得するためのフェッチ。 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 中国語 Web サイトの他の関連記事を参照してください。