A very cool thing about htmx is that we can send a response back from the server with some special headers that then trigger client-side behavior.

Like redirecting to a specific URL determined by the server after the request is received.

This helps us create applications where client and server are tightly coupled (i.e. the decision of what happens is determined with server-side logic).

For example I used the HX-Redirect response header, set it to /, and client-side once the request was successfully completed the user was redirected to /.

Here’s the code I used to do this:

if (Astro.request.method === 'DELETE') {
  await deleteProject(id) //some logic

+  return new Response(null, {
+    status: 204,
+    statusText: 'No Content',
+    headers: {
+      'HX-Redirect': '/',
+    },
+  })
}

After doing the HTTP request, htmx automatically redirects to that URL, client-side.

Other interesting ones are:

• HX-Push-Url to push a new URL in the browser history (equivalent to client-side calling History API’s pushState)
• HX-Refresh to trigger a client-side full refresh of the page after the response is received
• HX-Trigger to trigger a client-side event right after the response is received
• HX-Retarget to change the hx-target of the response to a different element on the page

A full list of other response headers you can set is here: https://htmx.org/docs/#response-headers

Lessons in this unit: