HTMX - 缓存

HTMX 旨在与标准 HTTP 缓存方法配合使用。本节将介绍 HTMX 如何利用这些技术来提高性能并减少服务器负载。

使用 HTMX 进行 HTTP 缓存

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

Last-Modified 和 If-Modified-Since

当您的服务器包含特定 URL 的 Last-Modified HTTP 响应标头时，浏览器将自动将 If-Modified-Since 请求标头添加到该 URL 的未来请求中。如果内容未发生改变，服务器将发送 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 标头

Vary 标头在您的服务器可以根据某些标头为同一 URL 提供不同内容时非常重要。例如，如果您的服务器在 HX-Request 标头缺失或为 false 时提供完整 HTML，在 HX-Request 为 true 时提供片段，则您应在响应中包含 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)。
考虑使用边缘缓存或 CDN 来处理静态资产和 API 响应。

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

HTMX 教程