htmx interview question · Most asked
A user reloads a page whose URL was pushed by htmx and sees an unstyled fragment. What's wrong?
Summary
The endpoint returns the same fragment to every request. On reload the browser requests the URL directly, without HX-Request, and needs the full page. Check HX-Request (and HX-History-Restore-Request) to choose between the partial and the full page, and send Vary: HX-Request.
Longer Answer
In htmx 2, history restore after a cache miss sends HX-Request: true together with HX-History-Restore-Request: true, so treat the latter as a full-page request (or set htmx.config.historyRestoreAsHxRequest = false). Without Vary, browser or CDN caches can still mix up the two versions.
Key Points
- Direct visits need full pages.
- Branch on HX-Request.
- Handle HX-History-Restore-Request.
- Vary: HX-Request.
Deep dive: htmx: Build Interactive Web Apps with HTML: URLs, History and hx-boost
Explanation
What interviewers look for
Understanding the full-page fallback and caching, not just 'add a header'.
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?