React 19.3引入browser API支持组件跳过服务端渲染

React 19.3于9月9日发布到npm。除稳定版View Transitions和Fragment Refs外，该版本还加入了react-dom的browser() API，允许组件明确选择不参与服务器端渲染。目前该能力已在Canary通道提供。

这一功能主要解决SSR组件访问localStorage、window或设备时区等浏览器专属能力时的兼容问题。过去开发者通常借助mounted状态，或使用typeof window !== "undefined"判断运行环境，但服务端输出与客户端首次渲染不一致时，容易触发水合不匹配。

使用时，客户端组件可调用use(browser())。服务器渲染遇到该调用后会暂停，并在最近的Suspense边界中保留备用内容；进入浏览器后，browser()返回undefined，组件便能在水合完成后正常渲染。该调用必须位于Suspense边界内，否则服务端渲染会失败。

use()可以放在条件逻辑之后，因此开发者能够根据数据情况决定是否延迟渲染。例如，loader提供initialData时，数据钩子仍可在服务端执行；没有初始数据时，则跳过对应渲染路径。React同时增加了onBrowserBailout回调和可选reason参数，便于定位服务端放弃渲染的具体位置。

这项改动源自React核心代码贡献，社区认为它以更简洁的方式解决了仅客户端组件问题，也为“数据是否应在服务端获取”提供了更自然的条件式处理方案。相比在应用中手动编写环境判断，新的声明式语义更容易与Suspense配合。

此前，Next.js可通过next/dynamic配合ssr:false，Astro则提供client:only指令实现类似效果，但这些方案分别绑定各自框架和打包体系。browser()直接纳入React，因此理论上可用于不同的SSR配置，而不局限于单一框架。

升级时可参考React 19升级指南，将react和react-dom调整为19.3版本。不过，用户指南目前仍将browser()标记为Canary功能，正式用于生产环境前需要确认所采用的发布通道。React由Meta与开源贡献者社区维护，已广泛服务于前端、全栈框架和React Native应用；19.3版本进一步强化了SSR、Suspense及并发渲染能力。