使用服务器操作实现渐进增强

渐进增强是一种网页开发策略：先构建一个可用的 HTML 基线，再在其上逐层添加 JavaScript 功能。核心功能对所有用户都可用，包括禁用了 JavaScript、网络连接缓慢或使用辅助技术的用户；启用 JavaScript 的用户则能获得增强的体验。

即使没有 JavaScript，使用 action={serverAction} 的表单也能作为整页 HTML POST 正常工作。浏览器提交表单，服务器执行操作，然后返回更新后的 HTML 页面。这与自 1995 年以来一直为网页表单提供支持的机制相同，React 的服务器操作在设计上与其兼容。

当没有 JavaScript 时，验证必须在服务器上进行。服务器操作会验证表单数据；如果验证失败，就会返回错误状态。服务器会在 HTML 中嵌入错误消息并重新渲染页面。用户无需运行任何客户端 JavaScript 就能看到错误。

当 React 对页面完成水合后，它会拦截表单提交，将其作为异步服务器操作调用处理，而不是执行整页 POST。用户可以在不重新加载页面的情况下获得原地更新、可见的等待状态和乐观界面，同时底层操作和表单结构都无需改变。

服务器会将初始状态嵌入 HTML，并据此渲染表单。React 完成水合时，会直接接收这个初始状态，不会引发闪烁或不匹配。useActionState 钩子经过专门设计，可以顺畅地协调服务器渲染的初始状态与客户端水合。

React 过渡允许界面在服务器操作调用期间继续保持交互。将表单提交包装在过渡中后，React 可以降低服务器往返的优先级，同时保持页面响应。这正是经过 JavaScript 增强的体验比整页重新加载明显更快的原因。

没有 JavaScript 时：用户点击提交，浏览器发送完整的 POST，服务器返回新的 HTML 页面（期间会短暂出现白屏，并重置滚动位置）。有 JavaScript 时：React 进行拦截，操作异步执行，页面中只有发生变化的部分在原处更新，不会闪烁，也不会重置滚动位置。

渐进增强有利于搜索引擎爬虫，因为爬虫可能不会执行 JavaScript。以表单驱动的搜索页或筛选页如果能作为整页 HTML 表单正常工作，就可以被索引和抓取。服务器渲染的结果意味着爬虫看到的是真实内容，而不是等待 JavaScript 填充的空 div。

屏幕阅读器和辅助技术在语义化 HTML 下的工作效果最佳。渐进增强的表单使用真正的 <form>、<input> 和 <button> 元素，辅助技术可以原生理解这些元素。JavaScript 会为错误播报添加 ARIA 实时区域，从而增强而不是取代原本就具备无障碍能力的基线。

在不稳定的网络环境中，JavaScript 代码包可能无法加载。经过渐进增强的页面仍然能够完成基本使用场景。这种韧性对于在覆盖较差地区使用移动网络的用户尤其重要，也适用于网络状况变化剧烈的地区。

渐进增强对于面向公众的表单最有价值，例如注册、联系、搜索和结账表单。具有复杂交互功能的内部控制面板可能不需要它。请在最大覆盖范围和可靠性很重要的地方有意识地采用它，例如营销页面、电子商务页面和用户引导流程。

渐进增强的核心原则是什么？

渐进增强意味着表单无需 JavaScript 也能作为普通 HTML POST 工作。服务器操作原生支持这一点：action={serverAction} 可以启用整页 POST 提交。随后，React 的水合会将表单升级为异步的原地更新，并提供等待状态。这种方式既能惠及无障碍、SEO 和低连接质量场景下的用户，同时仍能提供丰富的 JavaScript 体验。