Add documentation about HTTP caching (#1049)

Everything works out of the box as expected. Users that generate
different responses on the same URL based on some header need to be
mindful of the implications (for example using the Vary response
header). This is mentioned because it's a common pattern to use
HX-Request header to render only an HTML fragment.
This commit is contained in:
Sergi 2022-09-19 05:56:01 -07:00 committed by GitHub
parent 33332b1cec
commit 7bec3af03e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -39,6 +39,7 @@ customClasses: wide-content
* [debugging](#debugging)
* [hyperscript](#hyperscript)
* [3rd party integration](#3rd-party)
* [caching](#caching)
* [security](#security)
* [configuring](#config)
@ -1288,6 +1289,29 @@ example uses Alpine's `$watch` function to look for a change of value that would
</div>
```
## <a name="caching"></a>[Caching](#caching)
htmx works with standard [HTTP caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)
mechanisms out of the box.
If your server adds the
[`Last-Modified`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified)
HTTP response header to the response for a given URL, the browser will automatically add the
[`If-Modified-Since`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since)
request HTTP header to the next requests to the same URL. Be mindful that if
your server can render different content for the same URL depending on some other
headers, you need to use the [`Vary`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#vary)
response HTTP header. For example, if your server renders the full HTML when the
`HX-Request` header is missing or `false`, and it renders a fragment of that HTML
when `HX-Request: true`, you need to add `Vary: HX-Request`. That causes the cache to be
keyed based on a composite of the response URL and the `HX-Request` request header —
rather than being based just on the response URL.
htmx also works with [`ETag`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)
as expected. Be mindful that if your server can render different content for the same
URL (for example, depending on the value of the `HX-Request` header), the server needs
to generate a different `ETag` for each content.
## <a name="security"></a>[Security](#security)
htmx allows you to define logic directly in your DOM. This has a number of advantages, the