React 19.3于9月9日在npm上发布,除稳定的View Transitions和Fragment Refs外,还加入了react-dom browser() API,允许组件正式选择不进行服务器端渲染。Aurora Scharff分享了相关文档并宣布该API已上线,用户可在Canary通道中使用:将值传递给use()方法后,组件便会在服务器端暂停执行。

该功能针对服务器端渲染(SSR)中的常见问题:读取localStorage、window或设备时区的组件无法在服务器端生成有意义的HTML,现有解决方法要么在effect内部切换已挂载标志,要么通过typeof window !== 'undefined'控制渲染,当服务端渲染与客户端首次渲染不一致时会导致水合不匹配。新API取代了这两种方法:在服务器端渲染期间,use(browser())会暂停组件渲染,并将最近的Suspense边界中的备用内容保留在HTML中;在浏览器中则返回undefined,组件在水合后正常渲染。

该方法必须由客户端组件调用并位于Suspense边界内,否则服务器端渲染会失败。由于use()可以位于条件表达式之后,组件仅在必要时才延迟渲染,例如加载器提供initialData时数据钩子在服务器端渲染,否则跳过该渲染路径。React还添加了onBrowserBailout回调和可选的reason参数,便于开发团队准确报告服务器端渲染被跳过的位置。

该变更最初以React核心PR形式推出,This Week in React称其“消除了那些在服务器抑制错误的蹩脚变通方案”。有贡献者表示对browser() API感到兴奋,认为它用更简洁的方法解决了仅限客户端组件的问题;也有开发者称这种条件性数据获取是应对“是否应在服务器端获取数据”难题“最优雅的解决方案”。

该方案还缩小了与框架专属机制的体验差距。Next.js用户长期通过next/dynamic使用dynamic(() => import('./C'), { ssr: false }),Astro提供client:only指令,但两者都与各自打包工具绑定。browser()将这一功能整合到React中,适用于任何SSR配置。升级只需按React 19升级指南将版本号调整为react@19.3和react-dom@19.3,不过用户指南仍将browser()标记为仅限Canary通道,生产环境使用前需确认发布通道。