Atualmente estou trabalhando na criação de minha própria plataforma de blog usando Go, Templ e HTMX que eu mesmo hospedarei. Decidi que este seria um projeto divertido e útil de realizar, que também me ajudaria a adquirir conhecimento sobre essa pilha. Nesta postagem do blog, compartilharei minha experiência e soluções para um desafio que enfrentei ao lidar com redirecionamentos usando HTMX.

Redirecionando o navegador

Enquanto finalizava a funcionalidade para o administrador, decidi que era hora de finalmente começar a implementar o HTMX no projeto. Comecei com um elemento de botão que enviaria uma solicitação POST ao meu gerenciador de logout. Normalmente, eu realizaria essa tarefa usando um elemento de formulário, mas como mencionei, é hora de começar a implementar o HTMX no projeto. O problema é que quero que essa ação POST ainda se comporte como um formulário e que a resposta do servidor seja um redirecionamento de volta para o endpoint /.

Problema: lidando com redirecionamento com http.Redirect

Aqui está o elemento de botão que usei:

Logout

O problema que encontrei foi que a resposta para o redirecionamento ainda é HTML e o HTMX troca esse conteúdo pelo elemento do botão de logout.

Tratamento do redirecionamento com http.Redirect

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

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

Imagem: O conteúdo foi trocado com o botão Sair

Solução: usando o cabeçalho HX-Redirect

A troca de conteúdo pode ser evitada substituindo o http.Redirect por um cabeçalho HX-Redirect na resposta e o local de destino como seu 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)
}

Imagem: O navegador foi redirecionado para / anote o URL.

Conclusão

O processo de construção de minha própria plataforma de blog com Go, Templ e HTMX tem sido uma experiência gratificante até agora. Ao integrar o HTMX, o site ainda poderá ter muitos recursos de interatividade de um site moderno, sem a necessidade de escrever e fornecer código javascript extra. Lidar com redirecionamentos com o cabeçalho HX-Redirect foi uma solução simples e eficaz. Espero que este post ajude qualquer pessoa em seus projetos e incentive você a explorar o potencial do HTMX em suas aplicações web.