HN精选|论坛抛弃React改用HTMX

论坛弃React用HTMX:一套模板不再双写

一篇写于2023年的技术博文今天意外登上 Hacker News 首页(213分,154条评论):Django 论坛软件 Misago 的作者详细解释了为什么要把 React.js 从代码库中移除,改用 HTMX 实现页面交互。在”服务端渲染复兴”愈演愈烈的当下,这个三年前的决定被重新翻出来,引发了一场关于前端架构选择的大讨论。

背景:一套页面,两套实现

Misago 当时的架构是经典的”混合渲染”:用户请求页面时,Django 视图先用模板渲染出几乎完整的 HTML(同时内嵌一份相同数据的 JSON),但没有交互能力;JavaScript 下载运行后,读取页面里的 JSON,再用 React 组件把 Django 渲染的大部分 HTML 替换掉——按钮这才”活”过来。

这套方案的问题越积越多:

· 大量页面被实现了两遍——一遍 Django 模板,一遍 React 组件;
· 自定义者被坑:改了 Django 模板,页面上自己的修改闪一下就被 React 的 HTML 覆盖,他们根本不知道还要改另一套组件;
· 每个对用户和游客都可见的视图要做两遍,还得配 API 和 JSON 序列化器;
· 为 React 预烘焙数据的 JSON 序列化拖慢响应生成;
· 翻译文案在 django.po 和 djangojs.po 里各存一份,JS 翻译文件还增大首屏加载体积;
· 大量 JavaScript 会拖垮老旧低端的移动设备;
· 插件作者想注入自定义 HTML,必须同时写 Django 模板和 React 组件,Misago 还得为插件引入 JS 构建步骤。

为什么不是”更 React”,而是”更少 JavaScript”

作者认真考虑过两条”主流”路线:一是干脆全押 React——Django 只保留让搜索引擎满意的最小模板,UI 全部交给 React 应用加 API;二是把 Django 降级为纯 API,用 Next.js 或 Remix 这类带服务端渲染的 JS 框架。

但他注意到一个事实:市面上大量论坛软件仍在用”老办法”——尽量在服务端渲染,只在客户端用少量 JavaScript 增强交互——而且用户对此很满意,那些问题一个都不存在。论坛的交互其实高度局部化:管理操作、关注帖子、写回复、看通知、投票……这些事情在”必须避免整页刷新”成为教条之前,早就被无 React 的方式实现了很多年。

HTMX:声明式的”动态孤岛”

HTMX 是一个极小的库,让开发者把 HTML 的局部声明为”动态孤岛”,交互发生时由服务端渲染的新 HTML 片段替换。以帖子列表为例:切换分类时,只需让 Django 返回新分类下帖子列表那一段 HTML,页面其余部分(比如导航栏里已展开的搜索结果)纹丝不动。后端唯一要做的改动,是识别 HTMX 请求并只返回片段——不需要任何 JSON 序列化,也不需要写专门的 JavaScript

作者的总结相当直白:”HTMX 就是我们20年前用 jQuery 写的 $.get("url", "#outlet") 的声明式版本,或者说是 Rails 的 Turbolinks。我都不敢相信我会写下这句话:如果你想避免无脑堆砌技术栈,这就是论坛软件该走的路。”

社区反响:三年后的翻案与争论

有评论开门见山:”3年前的事了,今天凭什么上新闻?”——但讨论质量证明它并不过时。质疑者说:”HTMX 基本上是一个在找问题的解决方案,是新噱头,忽视了20年的经验教训。小项目还行,但静态为王,静态不够用时 HTMX 也很快力不从心。”支持者则认为:”服务端渲染本来就是大多数场景的正确选择,遇到真正复杂的交互,在模板里嵌一个迷你的 Vue/React 应用就行。””论坛九成是文本内容,HTMX 的局部渲染加 SSE 实时更新已经足够接近客户端体验。”还有人晒出现役技术栈:HTMX + DaisyUI + Tailwind 做近乎原生的 PWA;Hono + WebComponents + HTMX + serverless 稳定运行两年。

分析:按”交互密度”选型,而不是按潮流

Misago 案例的价值在于它把账算得很细:对内容型站点,React SPA 的 hydration 模式意味着双实现、双数据、双翻译,复杂度成本远超交互收益。HTMX 把复杂度从构建时移回请求时,让单语言、单模板、无构建步骤的小团队架构重新成为可能——这也是它近三年在 Django、Rails、Laravel 社区持续走红的原因。但评论区的警告同样中肯:交互密度一旦超过阈值(复杂表单依赖、实时协同、富客户端状态),HTMX 的”孤岛”会变成迷宫。技术选型该量的是页面里交互的浓度,而不是 GitHub 星数的涨跌。

原文:Removing React.js from the codebase and adapting Htmx for UI interactivity – Misago
HN 讨论(154条):news.ycombinator.com/item?id=49067301

Leave a Reply

Your email address will not be published. Required fields are marked *