HTMX + Go: Mẫu Thực Tế cho Việc Render HTML Một Phần và Toàn Trang

Alex Edwards đã công bố một bài hướng dẫn chi tiết về cách anh ấy tích hợp HTMX với các ứng dụng web Go. Bài viết tập trung vào các mẫu phía máy chủ giúp HTMX hoạt động trơn tru với gói html/template của Go, bao gồm tổ chức template, phản hồi một phần so với toàn trang, chuyển hướng và xử lý lỗi.

Cấu trúc template

Edwards sử dụng bố cục template ba tầng: một template cơ sở (base.tmpl) cho khung HTML chung, các template dành riêng cho trang trong pages/, và các phần tái sử dụng trong partials/. Tất cả các template được đặt tên rõ ràng bằng hành động {{define}} để nhất quán — không pha trộn tên tệp và tên đã định nghĩa. Template cơ sở bao gồm HTMX qua thẻ script defer để tránh chặn phân tích DOM.

Render một phần với HTMX

Một nút với hx-get="/gopher" và hx-swap="outerHTML" kích hoạt yêu cầu GET trả về một đoạn HTML một phần — trong trường hợp này là hình ảnh của một con gopher. Edwards lưu ý rằng máy chủ phải phát hiện các yêu cầu HTMX (qua tiêu đề HX-Request) và chỉ trả về template một phần, không phải bố cục toàn trang. Điều này giữ cho tương tác phía máy khách nhanh chóng và tránh render lại toàn bộ DOM.

Xử lý chuyển hướng và lỗi

Các chuyển hướng HTTP tiêu chuẩn không hoạt động tốt với HTMX vì máy khách mong đợi HTML, không phải phản hồi chuyển hướng. Edwards khuyến nghị sử dụng tiêu đề phản hồi HX-Redirect cho các yêu cầu do HTMX khởi tạo và quay lại chuyển hướng thông thường cho các yêu cầu trình duyệt thông thường. Đối với lỗi, anh ấy đề xuất trả về mã trạng thái HTTP thích hợp (như 404 hoặc 500) cùng với các template lỗi một phần, mà HTMX có thể hiển thị nội tuyến mà không cần tải lại toàn trang.

Nhúng tài nguyên tĩnh

Tất cả tài nguyên tĩnh (CSS, JS, hình ảnh) được nhúng vào tệp nhị phân Go bằng //go:embed. Edwards tạo các phiên bản fs.FS riêng biệt cho template HTML và tệp tĩnh để giữ các mối quan tâm được tách biệt rõ ràng. Một kiểu htmlRenderer tùy chỉnh phân tích các template dùng chung khi khởi động và nhân bản chúng theo từng yêu cầu, cho phép render một phần hiệu quả mà không cần phân tích lại template mỗi lần gọi.

Cấu hình mặc định

Edwards khuyến nghị đặt htmx.config.historyEnabled = false để tránh các mục lịch sử không mong muốn từ các cập nhật một phần và htmx.config.scrollIntoViewOnBoost = false để ngăn cuộn tự động trên các liên kết được boost. Những tinh chỉnh này ngăn chặn các bất ngờ UX phổ biến khi kết hợp HTMX với các trang được render từ máy chủ.