主要观点：团队曾在另一基础设施公司工作，先以 React SPA 起步后质疑其必要性，又尝试 LiveView 但有不满，此篇讲述这一历程。Phoenix 的 LiveView 使团队两极分化，有组件和功能能快 2 - 3 倍，也有组件和功能难建或直觉相悖，这造成了团队的紧张，不知是继续走这条路还是转为 SPA。后来找到名为 LiveSvelte 的配套库，它能让 LiveView 与 Svelte 结合，创造出高效的开发体验。

关键信息：

• LiveView 独特，在传统服务器渲染和 SPA 之间，服务器负责渲染页面且有状态，前端动作由后端处理并增量更新 DOM。
• LiveView 有优点也有痛点，如客户端状态不可避免，需结合 JS 模块、钩子和 LiveView 状态，且三种组件（LiveViews、LiveComponents、Components）差异大，导致重构困难。
• LiveSvelte 可从 LiveView 渲染 Svelte 组件，数据在 Elixir 和前端间流动，前后端都有状态且有双向通信通道，消除了前端微服务，责任划分清晰，开发高效。

重要细节：

• 传统服务器渲染中服务器无状态，SPA 中客户端负责建页，LiveView 则介于两者之间。
• 以表单为例说明 LiveView 中客户端需做一些事，如禁用第二个下拉框，需使用 JS 模块和钩子，且复杂交互模式还需用到 LiveView 状态，其与 React 模式不同。
• LiveView 的三种组件在渲染、传参、生命周期、通信选项等方面都不同，LiveComponents 不是进程，限制较多导致使用不便。
• LiveSvelte 中可在 LiveView 中设置 Svelte 组件的 props，通过 live.pushEvent 从前端组件回传事件到 LiveView，后端可处理并响应，前后端边界清晰，消除了前端微服务，业务逻辑在后端，前端代码简单。
• 团队选择 LiveSvelte 是因为 React 没有类似的 LiveView 库，Svelte 轻量快速，模板功能好，且 Svelte 5 即将推出，团队认为这能让大家更易上手。