SvelteKit 和在服务器端渲染中缓存组件输出

Question

我有一个计算和显示统计数据的 SvelteKit 着陆页组件。因为从数据库中提取数字是一项繁重的工作，而且这些信息只更新大约一个小时左右，所以我想缓存结果，以便为所有访问者快速提供登陆页面。在路由 load() 期间使用 fetch() 从后端加载统计信息。

我使用 SvelteKit 服务器端渲染页面，使用 Node.js 适配器。我可以让 SvelteKit 连接到 SQL、Redis 或其他东西来存储缓存结果。我相信即使是基于文件系统的缓存也适用于我的情况。

Svelte 和 SvelteKit 是否支持对我的用例有意义的任何类型的服务器端渲染缓存选项？例如。组件将缓存 load() 输入甚至生成的 HTML，而不是渲染组件。是否有在 Svelte 世界中广为人知并与 Svelte 集成良好的库或缓存解决方案？

Answer 1

您可以直接跳转到库，例如 svelte-swr或 svelte-sswr .尽管 SvelteKit 支持许多开箱即用的工具，但您可以使用它们来优化靠近客户端的性能，帮助消除昂贵的服务器请求，同时改善用户体验。

首先从客户端开始，然后沿着堆栈向下移动。以下是在添加外部依赖项之前要查看的一些原生 SvelteKit 性能特性:

• Service Workers可用于在浏览器中缓存数据。
• externalFetch hook可用于绕过 SSR 中的外部 API 请求。
• Output cache可用于缓存页面数据一段时间。

一旦您在浏览器中和通过 native 功能用尽了您的选择，那么您可以考虑添加外部 SWR 依赖项以进一步优化性能，而不会掩盖您可以使用内置和基于标准的 SvelteKit 功能实现的性能优势。

或者，您可以通过缓存数据库来降低服务器端调用的成本，而不会增加太多的复杂性，正如您在评论中指出的那样。这是 Geoff 的一篇文章，讨论了如何将 Redis 与 SvelteKit 应用程序集成:

https://blog.upstash.com/svelte-with-serverless-redis

最后，如果您使用 GraphQL 之类的东西，许多客户端都有内置的缓存设施，这可能还有助于缩短响应时间，同时限制过度获取和获取不足。