Vite是否支持React Server Components（RSC）？

基础支持情况 #

Vite本身没有原生内置RSC的完整实现，但官方的@vitejs/plugin-react从v4版本开始，已经提供了对React Server Components的适配支持，前提是配合React 18.2+版本使用。核心就是靠识别组件文件顶部的'use client'和'use server'指令，来区分客户端组件与服务端组件的编译逻辑。

核心工作机制 #

• 服务端组件编译：带'use server'（或无客户端指令）的服务端组件，会被Vite编译成Node.js可执行的代码，在服务器端运行并生成React Server Component Payload（一种序列化的组件树结构），不会被打包成浏览器可执行的JS。Vite会跳过这类组件的客户端打包流程，只处理服务端侧的编译。
• 客户端组件处理：标注'use client'的组件，会被Vite按照传统客户端组件的方式打包，生成浏览器可加载的代码块，同时会保留与服务端组件通信的桥接逻辑，用来接收服务端传递的payload并完成渲染。
• 开发与生产模式差异：
  • 开发模式下，Vite的HMR（热模块替换）会实时更新客户端组件；服务端组件的更新则需要重启服务端进程或热重载服务端模块来生效。
  • 生产模式下，Vite会分别打包服务端组件的服务端运行代码，以及客户端组件的浏览器适配代码，最后配合Express、Fastify这类服务器框架完成RSC的完整渲染流程。

和Vite内置SSR的区别 #

Vite内置的SSR是传统的服务端渲染，把整个应用在服务端渲染成HTML字符串，客户端再做 hydration；而RSC是组件级别的服务端运行，客户端只负责渲染需要交互的客户端组件，服务端组件的渲染结果以payload形式传递，不需要做 hydration。
另外，RSC要求更细粒度的组件拆分和指令标识，Vite对RSC的支持会针对这种拆分做专门的编译和打包优化，这和传统SSR的整体应用打包适配逻辑完全不同。

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