用 Go templ + htmx 構建現代 Web…

引言

十年 SPA 統治，2026 團隊反思：90% 後台與內容站不需要客戶端路由。SEO 與首屏是命門。全端團隊應用同一語言。Go 的 templ + htmx 為此而生：模板編譯時型別安全、互動靠 HTML 屬性——不寫 JS 的響應式 Web。

templ：型別安全的 Go 模板

html/template 執行時解析字串——拼錯字到渲染才發現。templ 編譯成 Go——編譯期報錯。

package views
templ Header(title string) { <header><h1>{ title }</h1></header> }
templ Layout(title string) {
  <!DOCTYPE html><html><head><script src="https://unpkg.com/htmx.org@2.0.4"></script></head>
  <body>@Header(title)<main>{ children... }</main></body></html>
}

{ title } 型別檢查。{ children... } 插槽組合。零執行時開銷——編譯期內聯。

htmx：超媒體驅動互動

「任何 HTML 元素可發起 HTTP 請求並用回應內容替換頁面任意部分」——無 JS。

屬性	作用
`hx-post/get`	HTTP 觸發
`hx-target`	目標元素
`hx-swap`	替換方式
`hx-trigger`	觸發事件
`hx-indicator`	載入指示器

即時搜尋

templ SearchPage() {
  <input type="search" hx-get="/search" hx-trigger="keyup changed delay:300ms"
    hx-target="#results" hx-indicator="#spinner"/>
  <div id="spinner" class="htmx-indicator">載入中...</div>
  <div id="results"></div>
}

func searchHandler(w http.ResponseWriter, r *http.Request) {
    views.SearchResults(searchDB(r.URL.Query().Get("q"))).Render(r.Context(), w)
}

僅回傳結果片段——htmx 自動替換 #results。

表單就地校驗

templ CreateForm(errors map[string]string) {
  <form hx-post="/create" hx-target="this" hx-swap="outerHTML">
    <input name="title"/> if errors["title"] != "" { <span class="error">{ errors["title"] }</span> }
    <button>建立</button>
  </form>
}

失敗時返回同一表單 + 錯誤。hx-target="this" 就地替換——無彈窗、無跳轉。

部落格 CRUD

func main() {
    mux := http.NewServeMux()
    mux.HandleFunc("GET /posts", listPosts)
    mux.HandleFunc("POST /posts", createPost)
    mux.HandleFunc("DELETE /posts/{id}", deletePost)
    http.ListenAndServe(":8080", mux)
}

刪除——JS 零行

<button hx-delete="/posts/1" hx-target="#post-1" hx-swap="delete">刪除</button>

hx-swap="delete" 直接刪除元素——handler 僅回傳 200 OK。

SSE 即時推送

templ LiveFeed() { <div hx-sse="connect:/events"><div hx-sse="swap:message">等待...</div></div> }

無需 Socket.IO。

vs React SPA

維度	templ+htmx	React SPA
首屏	服務端直出	需 SSR
SEO	完美	額外設定
互動	HTML 屬性	JSX+hooks
狀態	服務端	客戶端
構建	`templ generate`+`go build`	Vite+TS
部署	單二進位 ~15MB	靜態+Node
冷啟動	毫秒	SSR 依賴
團隊	Go 即可	前端工程師

核心：templ+htmx = 超媒體驅動（伺服器渲染、客戶端替換）。React = 客戶端應用。

部署

templ generate && go build -o myapp . && ./myapp

效能：回應快取、靜態資源 nginx/CDN、DB 連線池。

FAQ

Q1：檔案上傳？——hx-encoding="multipart/form-data"。

Q2：拖曳排序？——Alpine.js (~15KB)。

Q3：組件多編譯慢？——200+ 組件 templ generate ~1.5 秒 (M3 Pro)。

Q4：前端協作？——給 views/。templ 語法接近 JSX。

總結

不同範式：狀態歸伺服器，互動歸 HTML。「展示+表單+搜尋」用一半程式碼。

路徑：計數器→hx-post→表單校驗→搜尋→部署。