迁移实战：从React.js转向Htmx，简化论坛UI交互

下面是 Misago 当前的工作方式：

1. 你访问 https://misago-project.org。
2. Django 视图收集数据，渲染帖子列表。
3. Django 视图渲染模板，其中包含几乎完整的帖子列表 HTML，同时还嵌入了一份用于渲染该 HTML 的同一数据的 JSON。由于表单被禁用，页面没有交互功能。
4. JavaScript 下载。
5. JavaScript 运行，读取页面中的 JSON，然后用 React.js 组件生成的 HTML 替换掉大部分 Django 模板渲染的 HTML。按钮变得可用，界面中的时间戳也会更新。

这种做法存在一些问题：

• Misago 中有大量页面被实现了两次：一次是 Django 模板，一次是 React.js 组件。
• 尝试自定义 HTML 的人会遭殃：他们编辑了 Django 模板，看到改动在页面上闪现了一秒，然后就被 React.js 的 HTML 替换掉了——他们不知道还需要去自定义 React.js 的 HTML。
• 每个对用户和访客都开放的视图都必须做两次：一次是 Django 视图加模板，一次是 React.js 路由加组件。此外还需要 API 和 JSON 序列化器来支持数据获取。
• 为了给 React.js 应用预置数据而进行的 JSON 序列化拖慢了响应生成速度。
• 大部分翻译信息被重复存放，同时存在于 django.po 和 djangojs.po 文件中。JavaScript 翻译文件还增加了初始下载量。
• 大量的 JavaScript 可能会拖垮性能，尤其是在老旧、速度慢的移动设备上。
• 要让插件能够替换或注入自定义 HTML，插件需要同时实现 Django 模板和 React.js 组件。而且 Misago 需要在 misago-docker 的站点构建中加入 JavaScript 构建步骤。插件开发者必须同时掌握两者。

针对这个问题，我考虑过两种解决方案：

1. 放弃 Django 视图和模板，只保留最小版本以让搜索引擎爬虫满意。重点放在实现 API 上，所有 UI 都做成 React.js 应用。
2. 将 Django 简化为纯 API，配合支持服务端渲染的 JavaScript 框架使用，例如 Next.js 或 Remix.run.

但事实是：很多论坛软件仍在沿用老办法——尽可能在服务端渲染，再在客户端点缀一些 JavaScript 来提升交互性。用户对此很满意，而且这种方案完全没有上面提到的那些问题。

互联网论坛软件有不少交互功能，但这些交互都局限在页面的特定区域。比如版主操作、关注帖子、写回复、查看最新通知、投票。这些功能完全不需要 React.js 就能实现，而且在人们决定“全页面刷新必须避免”之前，多年来一直就是这么做的。

那么 HTMX 是什么？HTMX 是一个很小的库，它让开发者可以把 HTML 的某些部分标记为“动态孤岛”，当用户交互时，这些孤岛能被服务端新渲染的 HTML 替换掉。举个例子，帖子列表本身就是一个（较大的）孤岛。在 Django 模板里引入少量 HTMX 后，切换帖子列表中的分类时，只需让 Django 返回所选分类的新帖子列表的 HTML，而页面其他部分的 HTMX 内容（比如导航栏里已加载的搜索结果）保持不变。Misago 的后端代码只需要在请求来自 HTMX 时，返回这个孤岛的 HTML 即可，无需返回整个页面。完全不需要做 JSON 序列化，也不用写专门的 JavaScript 或 React.js.

HTMX 本质上就是 20 年前我们用 jQuery 写的 $.get("url", "#outlet") 的声明式版本，或者说 Rails 的 Turbolinks。真不敢相信我在写这句话，但如果你讨厌无限滚动，或者想让事情保持简单，这确实是论坛软件该走的路。