React 19（Canary版）安装后服务器组件指令未正常生效

操作背景 #

我通过以下命令安装了React预览版：

• npm i react@canary
• npm i react@next
• npm i react@19.0.0-canary-4c12339ce-20240408

问题描述 #

尝试编写客户端/服务器组件示例时，发现服务器组件未按文档预期工作：在标注"use server"的组件中使用useState()未触发报错，但根据文档说明，服务器组件不应支持useState()这类客户端Hook，这和Next.js中的报错表现完全不同。

原因分析 #

1. "use server"的作用误解："use server"并不是用来标记服务器组件的，它的作用是标记服务器端Action函数。服务器组件的识别逻辑在纯React环境和Next.js中不一样——Next.js靠文件命名（如*.server.js）或'use client'反向标记来区分，而纯React预览版需要搭配完整的RSC服务器渲染环境才能生效，单独的"use server"标记不会让React把组件判定为服务器组件。
2. 预览版功能未完善：Canary/Next版本属于开发预览分支，部分服务器组件的校验逻辑可能还未完全落地，或者默认未开启。尤其是在没有配套框架（Next.js、Remix等）的情况下，纯React本身不会自动对组件的客户端API使用做强制校验。
3. 缺少RSC运行环境配置：要让React的服务器组件校验生效，必须在服务器端渲染流程中明确区分组件类型，比如使用renderToPipeableStream这类RSC专用渲染API，并且正确配置组件边界。如果只是在普通客户端环境中使用"use server"，React不会触发服务器组件的限制逻辑。

解决建议 #

• 正确区分组件和Action：用'use client'标记需要使用客户端Hook的组件，"use server"仅用于定义服务器端Action函数；如果是在Next.js中开发，遵循框架约定：未标记'use client'的组件默认是服务器组件，此时使用useState会触发报错。
• 搭建完整RSC测试环境：如果要测试纯React的服务器组件，参考官方RSC示例的配置，搭建配套的Node.js服务器渲染环境，确保RSC的校验逻辑能正常运行。
• 更新到最新预览版：由于是预览版，功能处于迭代中，尝试安装最新的Canary版本，看是否修复了校验缺失的问题。

内容的提问来源于stack exchange，提问作者sensorario