文章内容

HTMX使前端变得简单起来

2026年10月05日 16:29 技术杂谈 5 阅读

这是 HTMX 让人感到兴奋的一个地方，并不是通过创造新的抽象来获胜，而是把一些本应该属于超媒体的功能重新赋予给 HTML。

问题不在于 JavaScript 本身，而是在于不断重复地表述同一个问题

很多业务页面真正的需求是十分简单的：提交一个表单、刷新一个列表、局部替换一段文字、根据事件发起请求。

但是常用的作法是：请求、序列化、状态管理、模板拼接、DOM 更新，每一步都重新编写一遍。

htmx改变的是前后端之间数据传输的方式，并不是代码本身有多长。

传统的SPA方式中，服务器返回的是JSON格式的数据，客户端会去解析这些数据然后进行渲染。

HTMX 的方式更加直接：服务器发送的是一个很小的 HTML 片段，然后用这个片段去替换掉 DOM 中的内容。

htmx到底是什么？

它是针对浏览器的一个JavaScript库，利用HTML属性使任何元素都可以发送出AJAX请求并且可以被控制：

超媒体的想法很清晰：把服务器产生的HTML片段作为界面更新的内容。

<button hx-post="/clicked" hx-swap="outerHTML">
  Click Me
</button>

点击按钮之后会向 /clicked 发送一个 POST 请求，并把返回的 HTML 替换掉原来的按钮。

本套模型的优点就是没有去创造新的模板语言，在HTML中补上“请求-响应-交换”的这条链条。

首先要做的是做最简单的事情

npm install htmx.org --save

要注意的是，正确的包名应该是htmx.org而不是htmx。

真正有价值的地方是架构层

如果项目的目的是进行服务器端渲染，并且后端可以稳定的提供出HTML片段的话，那么htmx对于CRUD、搜索、表单以及局部刷新等场景都很好用。

但是这并不是一个可以解决所有问题的答案。

官方并未表示它可以完全代替所有的前端框架。复杂的本地状态、大的客户端计算量、很高的离线需求的情况下，是否要使用它，还要看系统的实际情况。

不要忘记考虑缓存和安全的问题

htmx本身并不一定更安全。

缓存也不是小事。

如果同一个URL既可以返回整个页面也可以返回部分页面的话，那么服务端就需要把 Vary: HX-Request 设置好，防止完整的页面和片段一起被放入到同一个缓存槽里。

这就表明，htmx 不是敷衍了事的技术，而是把重心转移到服务端 HTML 结构的设计、缓存键的设计以及安全边界管理上来。

服务端可以直说HTML了，页面刷新就不用再绕道通过JSON来传达信息了。

这并不是复古的意思，而是一种复杂度再定义的行为。

https://github.com/bigskysoftware/htmx

#HTMX