从 Hotwire 迁移到 Vite 和 React

我最近把一个人 Rails 项目从 Hotwire 迁移到了 Vite 和 React（通过 Inertia.js）。

Hotwire 对纯 Rails 应用来说很棒，但就这个项目而言，UI 迭代和 AI 工具让我选择了切换。下面说说我为什么做出这个改变，以及实际中的权衡是什么样。

为什么我切换了

1. 现成的组件库（shadcn/ui）

我不擅长从零写 CSS。在 Rails 生态里，构建精致、可访问的 UI 组件（对话框、下拉菜单、组合框）通常意味着要么写自定义的 Stimulus 控制器和 CSS，要么使用 ViewComponent / Phlex 之类的 gem。

在 React 中，shadcn/ui 提供了基于 Radix UI 和 Tailwind CSS 构建的精美、可访问的组件。你把需要的复制到项目里，样式就直接能用了。对于设计时间有限的个人开发来说，这省下了大量折腾 CSS 的时间。

2. 聊天中的实时 AI 预览

现代 AI 助手（ChatGPT、Claude）非常擅长生成和更新 React 组件，并能即时提供交互式预览。

使用 Hotwire 和 ERB 时，我的迭代循环是：

让 AI 写 ERB + Stimulus
复制到 Rails 项目里
刷新浏览器并测试
重复

使用 React 和 shadcn/ui 时：

在聊天中描述组件
直接在 AI 界面里看到渲染后的组件
实时迭代和打磨
把最终组件复制到代码库中

这种更紧密的反馈循环让前端原型开发明显更快。

3. Vite 带来的流畅开发体验

使用 Vite 搭配 vite-plugin-ruby 能实现即时服务器启动和亚毫秒级热模块替换（HMR）。React 组件的改动会立即反映在浏览器中，无需整页刷新，在前端开发活跃期感觉流畅得多。

为什么 Inertia.js 让迁移变得轻松

我没有构建单独的 GraphQL 或 REST API 后端，而是使用了 Inertia.js Rails。

Inertia 充当粘合层：你照常保留 Rails 路由和控制器，返回 render inertia: "Users/Index", props: { users: @users } 而不是渲染 ERB 模板。这让我可以逐步迁移页面，而无需从头重建应用架构。

真正的权衡

这次切换并非没有缺点：

部署开销：放弃 importmaps 意味着要在 Docker 镜像和 CI/CD 流水线中引入 Node.js 和构建步骤。
心智切换成本：你必须在 Ruby 后端对象和 React 前端组件之间搭建状态管理的桥梁。
更多变动部件：在 Vite、React、Tailwind 和 Inertia 之间，需要维护更新的依赖项只会更多。

总结

Rails + Inertia + React + shadcn/ui 解决了我的最大个人瓶颈：快速创建干净、易用的界面，而不用花几天时间折腾自定义 CSS。如果你已经精通 CSS，或者对原生 Hotwire 很满意，额外的构建复杂度可能不值得。但若要快速原型开发并搭配丰富的 UI 组件，这个组合出乎意料地好用。