I've tried HTMX with a few different back end frameworks and languages, my setup varies a lot based on which framework/language I use.
The pattern I've been happiest with is when I can have a templating language designed to work really well with a component (or partials) approach.
I break down the UI into smaller components as I add more HTMX interactions. The UI is effectively a tree of nested components, much like react or svelte. When an HTMX request is sent, the API handler logic runs and instead of returning a success response it sends back HTML for the individual component(s) that HTMX needs to update.
tl;dr; When a request comes in, check headers to see if it was an HTMX request. If it wasn't, handle the API logic and return the full HTML page. If it was an HTMX request, still run the API logic but send back only the rendered components/partials that changed.
This is exactly how I’ve been doing my recent projects and it just works so smoothly.
> send back only the rendered components/partials that changed.
What does this look like for you in practice? I’m imagining you have specific APIs per component/partial that mimic what happens during the full page load. Is there anything else you’re doing?
Also, does “changed” just mean the resource was requested and you return a potentially refreshed partial? Or are you returning a signal to ignore triggering a page update when you can identify the rendered component has no difference?
yeah it's just that when I have a REST API I get like... I guess 20 or so endpoints "for free" (since I can PATCH specific fields up in interesting ways).
Maybe I need to be writing REST-looking form submission endpoints.... but then I have the immediate issue of presentation.
The pattern I've been happiest with is when I can have a templating language designed to work really well with a component (or partials) approach.
I break down the UI into smaller components as I add more HTMX interactions. The UI is effectively a tree of nested components, much like react or svelte. When an HTMX request is sent, the API handler logic runs and instead of returning a success response it sends back HTML for the individual component(s) that HTMX needs to update.
tl;dr; When a request comes in, check headers to see if it was an HTMX request. If it wasn't, handle the API logic and return the full HTML page. If it was an HTMX request, still run the API logic but send back only the rendered components/partials that changed.