Remix Client Cache 使用教程
项目介绍
remix-client-cache
是一个为 Remix 框架设计的强大且轻量级的客户端数据缓存库。它允许你在客户端缓存服务器加载器的数据,使用 clientLoaders
来实现。默认采用 stale-while-revalidate
策略,并在从服务器加载数据后立即替换过时信息。此外,它还支持对特定键或多个键的缓存失效,并允许你传入自定义的缓存适配器。
项目快速启动
安装
首先,通过 npm 安装 remix-client-cache
:
npm install remix-client-cache
基本使用
以下是一个使用 remix-client-cache
的基本示例,使用默认的内存适配器:
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { ClientLoaderFunctionArgs } from "@remix-run/react";
import { cacheClientLoader, useCachedLoaderData } from "remix-client-cache";
export const loader = async ({ params }: LoaderFunctionArgs) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${params.user}`);
const user = await response.json();
await new Promise((resolve) => setTimeout(resolve, 1000));
return json({ user: { description: Math.random() } });
};
export const clientLoader = (args: ClientLoaderFunctionArgs) =>
cacheClientLoader(args, {
type: "swr", // 默认是 swr,也可以设置为 normal
key: "/user/1", // 默认是当前路由路径,包括搜索参数和哈希
adapter: () => localStorage // 默认是内存适配器,可以是任何你希望的适配器
});
clientLoader.hydrate = true;
应用案例和最佳实践
自定义缓存适配器
你可以使用 configureGlobalCache
函数来覆盖库的默认内存缓存适配器。这将全局切换到你提供的任何适配器:
import { configureGlobalCache } from "remix-client-cache";
configureGlobalCache(() => localStorage); // 使用 localStorage 作为缓存适配器
缓存失效
使用 useCacheInvalidator
钩子返回一个函数,可以用来使特定键的缓存失效:
import { useCacheInvalidator } from "remix-client-cache";
export default function Index() {
const { invalidateCache } = useCacheInvalidator();
return (
<div>
<button onClick={() => invalidateCache("/user/1")}>Invalidate cache</button>
</div>
);
}
典型生态项目
remix-client-cache
可以与以下项目结合使用,以增强缓存和性能:
- Remix Run: 作为 Remix 框架的一部分,提供强大的服务器和客户端渲染能力。
- Service Workers: 用于更高级的缓存策略和离线支持。
- LocalForage: 一个提供类似 localStorage API 的库,但支持 IndexedDB、WebSQL 和 localStorage。
通过结合这些项目,你可以构建出高性能、响应迅速的 Web 应用。