How does Vite 6's React plugin optimize Server Components builds?

Vite 6's React plugin natively supports Server Components by automatically splitting code into separate client and server bundles using SWC for ultra-fast transpilation while maintaining 50ms HMR across boundaries. It detects 'use server' and 'use client' directives to generate .rsc streaming endpoints alongside static HTML shells for progressive hydration, eliminating the need for vite-plugin-ssr complexity. Glob import optimization pre-bundles client components for correct RSC payload references, preventing duplicate chunks while preserving source maps for debugging. This enables Next.js-style component colocation in any Vite project with zero configuration changes, making it the default choice for non-Next.js RSC production apps.

Example:-

Code

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react({ serverComponents: true, jsxRuntime: 'automatic' })]
});