Actualmente estoy trabajando en la creación de mi propia plataforma de blogs usando Go, Templ y HTMX que alojaré yo mismo. Decidí que sería un proyecto divertido y útil que también me ayudaría a adquirir conocimientos sobre esta pila. En esta publicación de blog, compartiré mi experiencia y soluciones a un desafío que enfrenté al manejar redirecciones usando HTMX.

Redirigir el navegador

Mientras finalizaba la funcionalidad para el administrador, decidí que era hora de finalmente comenzar a implementar HTMX en el proyecto. Comencé con un elemento de botón que enviaría una solicitud POST a mi controlador de cierre de sesión. Normalmente, realizaría esta tarea utilizando un elemento de formulario, pero como mencioné, es hora de comenzar a implementar HTMX en el proyecto. El problema es que quiero que esta acción POST siga comportándose como un formulario y que la respuesta del servidor sea una redirección al punto final /.

Problema: manejo de la redirección con http.Redirect

Aquí está el elemento de botón que utilicé:

Logout

El problema que encontré fue que la respuesta para la redirección sigue siendo HTML y HTMX intercambia este contenido por el elemento del botón de cerrar sesión.

Manejando la redirección con http.Redirect

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    http.Redirect(w, r, "/", http.StatusSeeOther)
}

Imagen: El contenido se ha intercambiado con el botón Cerrar sesión

Solución: usar el encabezado HX-Redirect

El intercambio de contenido se puede evitar reemplazando http.Redirect con un encabezado HX-Redirect en la respuesta y la ubicación de destino como su valor.

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    // Write our HX-Redirect header with location and redirect
    w.Header().Set("HX-Redirect", "/")
    http.WriteHeader(http.StatusNoContent)
}

Imagen: El navegador ha sido redirigido a / anote la URL.

Conclusión

El proceso de creación de mi propia plataforma de blogs con Go, Templ y HTMX ha sido una experiencia gratificante hasta ahora. Al integrar HTMX, el sitio podrá seguir teniendo muchas de las funciones de interactividad de un sitio web moderno sin tener que escribir ni ofrecer código JavaScript adicional. Manejar redirecciones con el encabezado HX-Redirect fue una solución simple y efectiva. Espero que esta publicación ayude a cualquiera con sus proyectos y los anime a explorar el potencial de HTMX en sus aplicaciones web.