HTMX - 缓存

HTMX 设计用于与标准的 HTTP 缓存方法良好地协同工作。本节将介绍 HTMX 如何使用这些技术来提高性能并减少服务器负载。

HTMX 的 HTTP 缓存

HTMX 从一开始就完全支持 HTTP 缓存方法。以下是它与不同 HTTP 头部交互的方式。

Last-Modified 和 If-Modified-Since

当您的服务器为特定 URL 包含 Last-Modified HTTP 响应头部时，浏览器将自动向该 URL 的未来请求添加 If-Modified-Since 请求头部。如果内容没有更改，这允许服务器发送 304 Not Modified 响应，从而节省带宽和处理时间。服务器响应示例如下。

HTTP/1.1 200 OK
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
Content-Type: text/html

<html>...</html>

浏览器后续请求

GET /page HTTP/1.1
If-Modified-Since: Wed, 21 Oct 2020 07:28:00 GMT

这使得缓存依赖于响应 URL 和 HX-Request 头部，而不仅仅是 URL 本身。

Vary 头部

当您的服务器可以根据某些头部为相同的 URL 提供不同内容时，Vary 头部非常重要。例如，如果您的服务器在缺少或为假 HX-Request 头部时提供完整的 HTML，而在 HX-Request 为真时提供片段，则应在响应中包含 Vary: HX-Request。

示例

HTTP/1.1 200 OK
Vary: HX-Request
Content-Type: text/html

<div>Partial content for HTMX request</div>

ETag

HTMX 按预期方式与 ETag 头部协同工作。但是，如果您的服务器可以为相同的 URL 生成不同的内容（例如，基于 HX-Request 头部），则应为每个版本的內容生成唯一的 ETag。

示例

HTTP/1.1 200 OK
ETag: "abc123"
Content-Type: text/html

<html>...</html>

Vary 的替代方案：getCacheBusterParam

如果您无法或不想使用 Vary 头部，HTMX 提供了一种替代方案。您可以将配置参数 getCacheBusterParam 设置为 true。

htmx.config.getCacheBusterParam = true;

启用此选项后，HTMX 将向 GET 请求添加缓存清除参数。这可以防止浏览器将 HTMX 和非 HTMX 响应缓存到相同的缓存槽中。

HTMX 中的客户端缓存

HTMX 提供内置的客户端缓存功能，有助于减少服务器负载并缩短响应时间。以下是一些需要考虑的重要功能。

HTMX hx-cache 属性

hx-cache 属性允许您在客户端缓存 HTMX 请求的响应。当设置为“true”时，HTMX 会将响应存储在内存中，并在相同请求中重复使用它。

示例

<div hx-get="/api/data" hx-cache="true">
    Load Data
</div>

在此示例中，第一次点击从服务器检索数据，而后续点击将使用缓存的响应。

缓存持续时间

您可以使用带有指定时间值的 hx-cache 属性来设置缓存响应的时长。

<div hx-get="/api/data" hx-cache="30s">
  Load Data (Cached for 30 seconds)
</div>

这会将响应缓存 30 秒，然后再向服务器发送新请求。

服务器端缓存注意事项

虽然 HTMX 管理客户端缓存，但同样重要的是要实现正确的服务器端缓存。以下是一些有用的技巧

使用正确的 HTTP 缓存头部，例如 Cache-Control 和 Etag 来管理缓存行为。
为频繁访问的数据实现服务器端缓存解决方案，例如 Redis 或 Memcached。
考虑对静态资源和 API 响应使用边缘缓存或 CDN。

HTMX 中的历史缓存

HTMX 会自动将页面缓存到浏览器的历史记录中，从而无需额外的服务器请求即可实现即时前进和后退导航。您可以使用 hx-history 属性来管理此行为。

示例

<div hx-get="/content" hx-history="false">
    Load Content (Not added to history cache)
</div>

设置 hx-history="false" 可防止将响应添加到历史缓存。

最佳实践

使用良好的缓存策略对于提高性能和节省资源非常重要。以下是一些简单的建议。

有效地使用 Last-Modified 和 ETag 头部来利用浏览器缓存。
当您的服务器根据请求头部提供不同的响应时，请正确实现 Vary 头部。
如果您不能使用 Vary 头部，请考虑使用 getCacheBusterParam，但请注意，这将阻止所有 GET 请求的缓存。
确保您为相同 URL 的不同内容变体生成准确的 ETag 值。

打印页面