htmx interview question · Most asked
Which request headers does htmx send, and how are they used?
Summary
HX-Request: true on every htmx request; HX-Trigger (id of the triggered element), HX-Trigger-Name, HX-Target (target id), HX-Current-URL, HX-Boosted for boosted requests, HX-Prompt for hx-prompt answers, and HX-History-Restore-Request for history restores.
Longer Answer
The main use is choosing between a fragment and a full page for the same URL: render the partial when HX-Request is present (and HX-History-Restore-Request is not), otherwise the full page, and send Vary: HX-Request so caches keep the versions apart. HX-Trigger and HX-Target let one endpoint serve several widgets.
Key Points
- HX-Request identifies htmx.
- Trigger, target and URL details.
- HX-History-Restore-Request needs a full page.
- Vary: HX-Request for caches.
Deep dive: htmx Tutorial: The Server Side
More most-asked htmx questions
- How do you handle form validation errors with htmx?
- How does htmx compare with React or Vue?
- What is htmx?
- What do hx-get, hx-post, hx-put, hx-patch and hx-delete do, and how are values sent?
- What is hx-target, and what relative selectors does it support?
- What swap styles does hx-swap support?
- How does hx-trigger work? Give examples of modifiers and special triggers.
- What security risks are specific to htmx, and how do you mitigate them?