使用 HTMX 构建动态 Web 应用时，用 HTML…

适用于希望以服务端返回 HTML 片段、通过 hx-* 属性驱动交互，并尽量减少 JavaScript 的 Web 应用开发场景。

适用场景

解决思路

1. 编写简洁、清晰、技术性强的响应，并提供精确的 HTMX 示例。
2. 利用 HTMX 的交互能力，避免依赖大量 JavaScript。
3. 优先保证代码结构的可维护性和可读性。
4. 服务端只返回必要的 HTML 片段。
5. 使用 `hx-get` 向 URL 发起 GET 请求。
6. 使用 `hx-post` 向 URL 发起 POST 请求。
7. 使用 `hx-put` 向 URL 发起 PUT 请求。
8. 使用 `hx-patch` 向 URL 发起 PATCH 请求。
9. 使用 `hx-delete` 向 URL 发起 DELETE 请求。
10. 使用 `hx-target` 指定响应内容注入的位置。
11. 使用 `hx-swap` 自定义 DOM 插入方式（如 innerHTML、outerHTML、beforeend 等）。
12. 使用 `hx-trigger` 自定义事件处理并控制请求时机。
13. 使用 `hx-select` 从响应中选择特定内容。
14. 使用 `hx-push-url` 在不刷新整页的情况下更新浏览器 URL。
15. 使用 `hx-replace-url` 替换历史记录中的当前 URL。
16. 点击加载内容时，使用 `hx-get` 指定 URL，并用 `hx-target` 指定注入目标，例如 `<button hx-get="/api/users" hx-target="#user-list">Load Users</button>`。
17. 通过 AJAX 提交表单时，使用 `hx-post` 指定提交 URL，用 `hx-target` 指定结果容器，用 `hx-swap="innerHTML"` 指定插入方式，例如 `<form hx-post="/api/submit" hx-target="#result" hx-swap="innerHTML">...</form>`。
18. 在处理请求前实现服务端验证。
19. 返回合适的 HTTP 状态码：客户端错误用 4xx，服务端错误用 5xx。
20. 提供用户友好的错误消息。
21. 使用 `hx-swap` 自定义错误反馈的呈现方式。
22. 使用 `hx-confirm` 添加确认提示，例如删除按钮上写 `hx-confirm="Are you sure you want to delete this?"`。
23. 通过只发送必要的 HTML 来最小化服务端响应大小。
24. 对频繁请求的端点实现服务端缓存。
25. 预编译可复用的组件片段。
26. 使用 `hx-boost` 对链接进行渐进增强。
27. 将 HTMX 与 Bootstrap 或 Tailwind 结合使用，避免脚本冲突。
28. 使用加载指示器改善用户体验。
29. 平滑处理过渡。
30. 将模板组织为高效、可复用的 HTMX 片段。
31. 模板组织时保持清晰的关注点分离。
32. 对常见组件使用局部模板。
33. 保持 HTMX 属性命名一致。
34. 确保交互快速且直观。
35. 在关键约定中用清晰的关注点分离来组织模板。
36. 优先使用声明式属性而不是 JavaScript 事件处理器。

适用边界 · 注意事项

• 需要复杂客户端状态管理、大量前端交互、离线优先或完整 SPA 行为时，不宜仅依赖 HTMX。
• 服务端只能提供纯 JSON API、无法返回 HTML 片段时，HTMX 的优势有限。
• 必须支持无 JavaScript 环境且没有渐进增强或回退方案时，应谨慎使用。