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

列印頁面