Je travaille actuellement sur la création de ma propre plateforme de blogs utilisant Go, Templ et HTMX que j'hébergerai moi-même. J'ai décidé que ce serait un projet amusant et utile à aborder qui m'aiderait également à acquérir des connaissances sur cette pile. Dans cet article de blog, je partagerai mon expérience et mes solutions à un défi auquel j'ai été confronté lors de la gestion des redirections à l'aide de HTMX.

Redirection du navigateur

En finalisant les fonctionnalités pour l'administrateur, j'ai décidé qu'il était temps de commencer enfin à implémenter HTMX dans le projet. J'ai commencé avec un élément de bouton qui enverrait une requête POST à ​​mon gestionnaire de déconnexion. En règle générale, j'accomplirais cette tâche en utilisant un élément de formulaire, mais comme je l'ai mentionné, il est temps de commencer à implémenter HTMX dans le projet. Le problème est que je veux que cette action POST se comporte toujours comme un formulaire et que la réponse du serveur soit une redirection vers le point de terminaison /.

Problème : gestion de la redirection avec http.Redirect

Voici l'élément bouton que j'ai utilisé :

Logout

Le problème que j'ai rencontré était que la réponse à la redirection est toujours HTML et que HTMX échange ce contenu contre l'élément du bouton de déconnexion.

Gestion de la redirection avec http.Redirect

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

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

Image : le contenu a été échangé avec le bouton de déconnexion

Solution : utiliser l'en-tête HX-Redirect

L'échange de contenu peut être évité en remplaçant http.Redirect par un en-tête HX-Redirect dans la réponse et l'emplacement cible comme valeur.

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)
}

Image : Le navigateur a été redirigé vers / notez l'URL.

Conclusion

Le processus de création de ma propre plateforme de blogs avec Go, Templ et HTMX a été jusqu'à présent une expérience enrichissante. En intégrant HTMX, le site pourra toujours disposer de nombreuses fonctionnalités d'interactivité s'il s'agit d'un site Web moderne sans avoir à écrire et à servir du code javascript supplémentaire. La gestion des redirections avec l’en-tête HX-Redirect était une solution simple et efficace. J'espère que cet article aidera tout le monde dans ses projets et vous encouragera à explorer le potentiel de HTMX dans vos applications Web.