HTMX vs React năm 2026 — bạn có thể không cần đến SPA

Nếu bạn đang xây dựng ứng dụng CRUD server-rendered với Django, Rails, Go, hay bất kỳ backend nào đã render HTML sẵn, HTMX có thể cắt giảm 80–90% lượng JavaScript và kích thước bundle với tỉ lệ tương đương. Dùng React khi UI cần quản lý state phức tạp phía client, cộng tác thời gian thực, kéo-thả, hoặc khi bạn cần chiều sâu của hệ sinh thái npm.

Bài này dành cho ai

Các developer Python, Go, và Ruby muốn thêm tính tương tác mà không phải áp dụng toàn bộ framework SPA. Các developer React đang tự hỏi liệu stack của mình có phức tạp hơn so với vấn đề thực tế hay không. Nếu bạn đang xây dựng ứng dụng mobile, PWA offline-first, hay trình soạn thảo cộng tác thời gian thực, hãy chuyển ngay đến phần HTMX thất bại ở đâu.

Những gì chúng tôi đo lường

HTMX 2.0.10 so với React 19 (phát hành tháng 12 năm 2024). Kích thước bundle từ Bundlephobia. Dữ liệu hệ sinh thái từ npm trends (tuần 2026-05-10), GitHub Rising Stars 2024, và State of JS 2024. Số liệu hiệu năng từ các case study migration đã công bố (Contexte, Kutt, OpenUnited) với phương pháp trích dẫn cụ thể theo từng kết quả.

HTMX vs React: kết quả so sánh

1. Kích thước bundle và thời gian tương tác

HTMX 2.0.10 chỉ nặng 17.6 KB gzipped, không có dependency và không cần bước build. React 19 + ReactDOM vào khoảng 45 KB gzipped trước khi thêm router, thư viện state, hay bộ component.

Khoảng cách này càng lớn ở cấp độ ứng dụng. Khi Kutt — một URL shortener mã nguồn mở — chuyển từ Next.js sang HTMX, tổng kích thước trang giảm từ 800 KB xuống còn 100 KB, tức giảm 87.5%. Contexte, một nền tảng tin tức của Pháp, ghi nhận thời gian first paint giảm từ 2–6 giây xuống còn 1–2 giây (cải thiện 50–60% về thời gian tương tác) sau khi thay React bằng HTMX.

HTMX đạt được điều này vì không có virtual DOM, không có reconciliation pass, và không có client-side routing. Server gửi HTML fragment. Trình duyệt vá DOM trực tiếp. Không có gì cần phân tích cú pháp, tree-shake, hay hydrate.

2. Mô hình tư duy: hypermedia so với JSON API

HTMX không phải là thư viện component. Đây là một kiến trúc khác. Carson Gross, tác giả của HTMX, mô tả nó như sự tổng hợp của một luận điểm cũ: MPA (ứng dụng đa trang) → SPA → HDA (Hypermedia-Driven Application).

Trong một HDA, server là nguồn tin cậy duy nhất. Người dùng nhấn nút, server nhận request, trả về HTML fragment, HTMX cập nhật vào trang. Bạn viết hx-get="/search?q=foo" và hx-target="#results". Server render một <ul> và gửi về. Không JSON, không fetch wrapper, không cập nhật state, không re-render cycle.

React 19 đã bổ sung Server Components (ngày 5 tháng 12 năm 2024), đưa việc render về phía server. Nhưng Server Components vẫn serialize một cây dạng JSON mà client runtime deserialize — không phải HTML thuần. Bundle phía client nhỏ hơn, nhưng mô hình tư duy vẫn là component-driven, và độ phức tạp của tooling vẫn ở mức React.

Mô hình HDA sẽ “click” ngay với các developer quen suy nghĩ theo server template. Đây là sự thay đổi tư duy nếu bạn đã làm quen với component nhiều năm.

Để đánh giá production đầy đủ về bản thân React 19, xem React 19: nâng cấp hay chờ?.

3. Tầm với của hệ sinh thái

Khoảng cách về lượt tải rất lớn. React đạt 545 triệu lượt tải npm mỗi tháng. HTMX đạt 677,000 — cách nhau 807 lần. State of JS 2024 ghi nhận React được sử dụng trong công việc bởi 8,548 người (hạng 1); HTMX bởi 316 người (hạng 9).

GitHub Rising Stars 2024 lại kể câu chuyện khác: HTMX tăng thêm 16,800 stars (hạng 1 trong front-end), React tăng 14,200 (hạng 2). HTMX đang tăng trưởng nhanh từ nền tảng nhỏ. React tăng chậm hơn từ nền tảng rất lớn.

Ý nghĩa thực tế: React có hệ sinh thái component mà không thư viện nào sánh được. ShadCN, MUI, Radix, Tanstack Query, Zustand, React Hook Form — tất cả đã có giải pháp, đều được duy trì, đều có tài liệu tốt. HTMX không có gì tương đương. Bạn cần thêm Alpine.js để xử lý state phía client, một CSS framework cho component, và tự viết nhiều logic server-side hơn. Sự đánh đổi đó hoàn toàn hợp lý — thậm chí đáng mong muốn — với các team có developer backend mạnh. Với team thiên về frontend, khoảng cách hệ sinh thái là ma sát thực sự.

4. Trải nghiệm developer với các backend hiện đại năm 2026

Nếu backend của bạn đã render HTML (Django templates, Rails ERB, Go html/template, Jinja2), thêm HTMX chỉ cần vài thẻ script và một số thuộc tính hx-*. Không cần build pipeline, không node_modules, không cấu hình TypeScript.

Contexte ghi nhận giảm 67% số dòng code, giảm 96% JavaScript dependency, và giảm 88% thời gian build sau khi chuyển từ React. OpenUnited giảm 61% LOC và 72% số file. Đội ngũ Paris 2024 Olympics đã triển khai công cụ tự động hóa mạng quan trọng bằng Django + HTMX trong 8 tuần — so với ước tính 18 tháng cho giải pháp React đầy đủ.

Đây là kết quả migration từ các team đã đầu tư vào React. Các dự án HTMX greenfield sẽ không tốn chi phí migration đó. Nếu bạn đang cân nhắc giữa Django và FastAPI cho backend đó, xem so sánh Django vs FastAPI của chúng tôi.

Với các team dùng công cụ AI coding như Cursor trong năm 2026, có một điểm đáng lưu ý: AI pair programmer được huấn luyện nhiều trên React và TypeScript. Các pattern HTMX (swap strategies, hx-boost, server-sent events với hx-sse) chưa được đại diện đủ trong dữ liệu huấn luyện. Bạn sẽ nhận được gợi ý AI tốt hơn khi viết code React. Khoảng cách này đang thu hẹp, nhưng hiện tại vẫn còn.

5. HTMX thất bại ở đâu {#where-htmx-fails}

Gumroad, nền tảng thương mại điện tử, đã đánh giá HTMX và từ chối rõ ràng. Năm lý do của họ là cách diễn đạt rõ nhất về giới hạn của HTMX:

Validation động — form validation đòi hỏi phản hồi phức tạp ngay phía client (phụ thuộc giữa các field, kiểm tra async) rất khó xử lý khi không có JavaScript.
Trải nghiệm mặc định kém sinh động — mô hình hypermedia của HTMX khiến ứng dụng của Gumroad nghiêng về giao diện Rails/CRUD cơ bản, dẫn đến “trải nghiệm người dùng thực sự kém (hoặc ít nhất là nhàm chán và chung chung) theo mặc định.” Sản phẩm mục tiêu của họ cần thứ phong phú hơn.
Khoảng cách AI tooling — như đã đề cập, AI pair programmer kém thành thạo hơn với các pattern HTMX.
Khoảng cách hệ sinh thái — không có thư viện component nào đạt độ trưởng thành của ShadCN hay MUI.
Cộng tác thời gian thực — chỉnh sửa trực tiếp nhiều người dùng (như Figma, Notion, Linear) đòi hỏi state phía client đồng bộ qua WebSocket. HTMX có thể dùng WebSocket qua hx-ws, nhưng kiến trúc này không phù hợp với bài toán đó.

Ngoài danh sách của Gumroad: HTMX gặp khó trên mạng không ổn định. Mô hình HDA giả định round-trip nhanh đến server cho mỗi tương tác. Trên thiết bị kiosk hoặc kết nối di động chập chờn, độ trễ đó người dùng sẽ cảm nhận được. Chính Gross thừa nhận độ trễ bị giới hạn bởi server, và “80 của 80/20” trong JavaScript là animation — lĩnh vực mà HTMX cố tình không can thiệp.

HTMX không có hướng đi cho mobile, không có con đường offline-first, và không có thư viện component nào đạt độ trưởng thành của ShadCN hay MUI. Đây không phải lỗi — đây là giới hạn phạm vi có chủ đích. Hãy biết rõ điều này trước khi quyết định dùng.

Kết luận

Chọn HTMX nếu…	Chọn React nếu…
Backend của bạn đã render HTML (Django, Rails, Go)	UI có state client phức tạp (wizard nhiều bước, cộng tác thời gian thực)
Bundle size và TTI quan trọng và bạn không muốn tốn chi phí hydration	Bạn cần kéo-thả, canvas, hoặc UI nhiều animation
Team mạnh về backend và muốn giữ full-stack mà không cần build pipeline JS	Team của bạn thành thạo React và chiều sâu hệ sinh thái quan trọng
Ứng dụng thiên về CRUD với mức độ tương tác vừa phải (tìm kiếm, filter, phân trang, modal)	Bạn đang xây dựng ứng dụng mobile hoặc cần offline-first
Bạn muốn triển khai nhanh mà không mất nhiều thời gian thiết lập công cụ	AI coding tooling hoạt động tốt hơn với TypeScript/React (có thể đúng trong năm 2026)

Không cái nào tốt hơn một cách khách quan. Các migration của Contexte và Kutt chứng minh lợi ích thực sự khi HTMX phù hợp. Việc Gumroad từ chối cũng chứng minh giới hạn thực sự khi không phù hợp. Hãy chọn công cụ phù hợp với vấn đề, không phải theo xu hướng.

Lưu ý

Chúng tôi không tự chạy benchmark trên phần cứng production — các số liệu hiệu năng đến từ các case study đã công bố. Kết quả migration (Contexte, OpenUnited) phản ánh các team đã có sẵn độ phức tạp React; các dự án HTMX greenfield sẽ có đường cong chi phí khác. Khoảng cách AI tooling dựa trên chất lượng completion quan sát được đầu năm 2026 và sẽ thay đổi khi các model được huấn luyện lại.

Liên kết Cursor ở trên là liên kết affiliate.