vite-plugin-react-server 1.3.6 → 1.4.1

package/oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js

@@ -50,7 +50,7 @@
       var existingPromise = asyncModuleCache.get(metadata.specifier);
       if (existingPromise)
         return "fulfilled" === existingPromise.status ? null : existingPromise;
-      var modulePromise = import(metadata.specifier);
+      var modulePromise = import(/* @vite-ignore */ metadata.specifier);
       modulePromise.then(
         function (value) {
           modulePromise.status = "fulfilled";

package/oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js

@@ -26,7 +26,7 @@ function preloadModule(metadata) {
   var existingPromise = asyncModuleCache.get(metadata.specifier);
   if (existingPromise)
     return "fulfilled" === existingPromise.status ? null : existingPromise;
-  var modulePromise = import(metadata.specifier);
+  var modulePromise = import(/* @vite-ignore */ metadata.specifier);
   modulePromise.then(
     function (value) {
       modulePromise.status = "fulfilled";

package/oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js

@@ -50,7 +50,7 @@
       var existingPromise = asyncModuleCache.get(metadata.specifier);
       if (existingPromise)
         return "fulfilled" === existingPromise.status ? null : existingPromise;
-      var modulePromise = import(metadata.specifier);
+      var modulePromise = import(/* @vite-ignore */ metadata.specifier);
       modulePromise.then(
         function (value) {
           modulePromise.status = "fulfilled";

package/oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js

@@ -27,7 +27,7 @@ function preloadModule(metadata) {
   var existingPromise = asyncModuleCache.get(metadata.specifier);
   if (existingPromise)
     return "fulfilled" === existingPromise.status ? null : existingPromise;
-  var modulePromise = import(metadata.specifier);
+  var modulePromise = import(/* @vite-ignore */ metadata.specifier);
   modulePromise.then(
     function (value) {
       modulePromise.status = "fulfilled";

package/oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js

@@ -2854,7 +2854,7 @@
       var existingPromise = asyncModuleCache.get(metadata.specifier);
       if (existingPromise)
         return "fulfilled" === existingPromise.status ? null : existingPromise;
-      var modulePromise = import(metadata.specifier);
+      var modulePromise = import(/* @vite-ignore */ metadata.specifier);
       modulePromise.then(
         function (value) {
           modulePromise.status = "fulfilled";

package/oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.production.js

@@ -1952,7 +1952,7 @@ function preloadModule(metadata) {
   var existingPromise = asyncModuleCache.get(metadata.specifier);
   if (existingPromise)
     return "fulfilled" === existingPromise.status ? null : existingPromise;
-  var modulePromise = import(metadata.specifier);
+  var modulePromise = import(/* @vite-ignore */ metadata.specifier);
   modulePromise.then(
     function (value) {
       modulePromise.status = "fulfilled";

package/oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js

@@ -122,7 +122,7 @@ function preloadModule(metadata) {
     return existingPromise;
   } else {
     // $FlowFixMe[unsupported-syntax]
-    var modulePromise = import(metadata.specifier);
+    var modulePromise = import(/* @vite-ignore */ metadata.specifier);
     modulePromise.then(function (value) {
       var fulfilledThenable = modulePromise;
       fulfilledThenable.status = 'fulfilled';

package/oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js

@@ -55,7 +55,7 @@ function preloadModule(metadata) {
     return existingPromise;
   } else {
     // $FlowFixMe[unsupported-syntax]
-    const modulePromise = import(metadata.specifier);
+    const modulePromise = import(/* @vite-ignore */ metadata.specifier);
     modulePromise.then(value => {
       const fulfilledThenable = modulePromise;
       fulfilledThenable.status = 'fulfilled';

package/oss-experimental/react-server-dom-esm/package.json

@@ -32,12 +32,12 @@
     "./client.node": "./client.node.js",
     "./server": {
       "react-server": "./server.node.js",
-      "default": "./server.js"
+      "default": "./server.node.js"
     },
     "./server.node": "./server.node.js",
     "./static": {
       "react-server": "./static.node.js",
-      "default": "./static.js"
+      "default": "./static.node.js"
     },
     "./static.node": "./static.node.js",
     "./node-loader": "./esm/react-server-dom-esm-node-loader.production.js",
@@ -60,4 +60,4 @@
     "acorn-loose": "^8.3.0",
     "webpack-sources": "^3.2.0"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-react-server",
-  "version": "1.3.6",
+  "version": "1.4.1",
   "description": "Vite plugin for React Server Components (RSC)",
   "type": "module",
   "main": "./dist/plugin/index.js",
@@ -43,7 +43,9 @@
     "./stream": "./dist/plugin/stream/index.js",
     "./stream/client": "./dist/plugin/stream/index.client.js",
     "./stream/server": "./dist/plugin/stream/index.server.js",
-    "./env": "./dist/plugin/env/plugin.js",
+    "./env": {
+      "types": "./env.d.ts"
+    },
     "./config": "./dist/plugin/config/index.js",
     "./error": "./dist/plugin/error/index.js",
     "./vendor": "./dist/plugin/vendor/index.js",

package/plugin/config/resolveOptions.ts

@@ -668,6 +668,8 @@ export const resolveOptions: ResolveOptionsFn = function _resolveOptions(
     useHtmlWorker: options.build?.useHtmlWorker ?? 
       // Force useHtmlWorker to true when build.pages is explicitly configured, regardless of default logic
       (options.build?.pages && (Array.isArray(options.build.pages) || typeof options.build.pages === 'function')) ? true : DEFAULT_CONFIG.BUILD.useHtmlWorker,
+    renderMode: options.build?.renderMode ?? "parallel",
+    batchSize: options.build?.batchSize ?? 8,
   } satisfies ResolvedUserOptions["build"];
 
   // Development configuration

package/plugin/dev-server/configureReactServer.client.ts

@@ -74,7 +74,7 @@ export const configureReactServer: CreateReactWorkerServerFn =
       },
     });
     
-    // Return object with restart function and HMR update sender for handleHotUpdate
+    // Return object with restart function and HMR update sender for hotUpdate
     return {
       restart: restartFn,
       sendHmrUpdate: (file: string, routes?: string[]) => {

package/plugin/dev-server/plugin.client.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import type { VitePluginFn } from "../../types.js";
 import { configureReactServer } from "./configureReactServer.client.js";
 import { resolveOptions } from "../config/resolveOptions.js";
@@ -34,8 +35,7 @@ export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactS
   return {
     name: "vite-plugin-react-server:dev-server-client",
     apply: "serve", // Only apply in dev server mode
-    // Note: Removed applyToEnvironment - handleHotUpdate needs to run regardless
-    // The plugin should apply to client environment, but handleHotUpdate is a dev server hook
+    // No applyToEnvironment — hotUpdate needs to run for all environments
     // that should work regardless of environment filtering
     config(_config, viteConfigEnv) {
       configEnv = viteConfigEnv;
@@ -72,7 +72,13 @@ export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactS
         resolvedConfig: server.config,
       });
     },
-    handleHotUpdate({ file, server }) {
+    hotUpdate(ctx: any) {
+      const { file, server } = ctx;
+      const envName = ctx.environment?.name ?? 'unknown';
+      
+      // Only run worker invalidation from the client environment (once per change)
+      if (envName !== 'client') return;
+      
       // Prevent recursive HMR updates
       if (isProcessingHmr) {
         return undefined;
@@ -84,11 +90,18 @@ export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactS
       
       // Normalize paths for comparison (handle both absolute and relative)
       const normalizedFile = file.replace(projectRoot, '').replace(/^\/+/, '');
-      const isServerFile = normalizedFile.startsWith(moduleBase + '/') && 
+      const isSourceFile = normalizedFile.startsWith(moduleBase + '/') && 
         (file.endsWith('.tsx') || file.endsWith('.ts') || file.endsWith('.jsx') || file.endsWith('.js'));
       
-      // Always log for debugging
-      server.config.logger.info(`[vite-plugin-react-server] handleHotUpdate: file=${file}, normalized=${normalizedFile}, isServerFile=${isServerFile}, hasHandler=${!!hmrHandler}`);
+      // Skip client components — let @vitejs/plugin-react handle them with Fast Refresh
+      const isClientFile = isSourceFile && (() => {
+        try {
+          const head = readFileSync(file, 'utf-8').slice(0, 200);
+          return /^\s*["']use client["']/.test(head.split('\n')[0]);
+        } catch { return false; }
+      })();
+      
+      const isServerFile = isSourceFile && !isClientFile;
       
       if (isServerFile && hmrHandler) {
         isProcessingHmr = true;
@@ -100,17 +113,8 @@ export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactS
           // This clears component caches, but Node.js's ES module cache persists
           hmrHandler.sendHmrUpdate(file);
           
-          // CRITICAL: Send custom HMR message to client via WebSocket
-          // Server components aren't in the client bundle, so vite:beforeUpdate doesn't fire
-          // We need to manually notify the client to refetch the RSC stream
-          server.ws.send({
-            type: 'custom',
-            event: 'vite-plugin-react-server:server-component-update',
-            data: {
-              file: normalizedFile,
-              path: file,
-            },
-          });
+          // NOTE: The WS event to notify the client is sent by the hotUpdate hook
+          // in plugin.server.ts — don't duplicate it here.
           
           // CRITICAL: Node.js caches ES modules, so we need to restart the worker
           // to clear the module cache. Debounce restarts to prevent recursion.
@@ -139,7 +143,7 @@ export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactS
             }, 500); // 500ms debounce
           } else {
             // No restart function available yet - worker hasn't been created
-            // This is expected if handleHotUpdate fires before the first request
+            // This is expected if hotUpdate fires before the first request
             server.config.logger.warn(`[vite-plugin-react-server] Restart function not available yet - worker will be created on next request`);
             setTimeout(() => {
               isProcessingHmr = false;
@@ -153,8 +157,7 @@ export const vitePluginReactDevServer: VitePluginFn = function _vitePluginReactS
         server.config.logger.warn(`[vite-plugin-react-server] Server file changed but HMR handler not available yet: ${file}`);
       }
       
-      // Return undefined to allow other plugins to handle the update
-      return undefined;
+      // Don't suppress — plugin.server.ts hotUpdate handles page reload prevention
     },
   };
 };

package/plugin/dev-server/plugin.server.ts

@@ -2,6 +2,7 @@ import type { StreamPluginOptions } from "../../types.js";
 import { configureReactServer } from "./configureReactServer.server.js";
 import { resolveOptions } from "../config/resolveOptions.js";
 import type { Plugin, ViteDevServer } from "vite";
+import { readFileSync } from "node:fs";
 
 /**
  * Dev server plugin for server environment.
@@ -26,15 +27,74 @@ export const vitePluginReactDevServer = function _vitePluginReactServerDevServer
     name: "vite-plugin-react-server:server-hmr",
     apply: "serve" as const,
     // Server-level handleHotUpdate — sends custom WS event to client
+    // Vite 6 Environment API: hotUpdate runs per-environment.
+    // Prevent server/ssr environments from triggering page reload for client components.
+    hotUpdate(ctx: any) {
+      const { file, server } = ctx;
+      const envName = ctx.environment?.name ?? 'unknown';
+      
+      const moduleBase = userOptions.moduleBase || "src";
+      const projectRoot = userOptions.projectRoot || server?.config?.root || '';
+      const normalizedFile = file.replace(projectRoot, '').replace(/^\/+/, '');
+      const isSourceFile = normalizedFile.startsWith(moduleBase + '/');
+      
+      if (!isSourceFile) return;
+      
+      // Client environment: let Vite/@vitejs/plugin-react handle it
+      if (envName === 'client') {
+        // Check if it's a client component — let Fast Refresh handle it
+        const isClient = (file.endsWith('.tsx') || file.endsWith('.ts') || file.endsWith('.jsx') || file.endsWith('.js')) && (() => {
+          try {
+            const head = readFileSync(file, 'utf-8').slice(0, 200);
+            return /^\s*["']use client["']/.test(head.split('\n')[0]);
+          } catch { return false; }
+        })();
+        
+        if (isClient) return; // Let Fast Refresh handle client components
+        
+        // Server component changed — send RSC refetch event to client
+        // Only do this once (from client env) to avoid duplicate events
+        server.config.logger.info(`[vite-plugin-react-server] File changed (RSC refetch): ${normalizedFile}`);
+        server.ws.send({
+          type: 'custom',
+          event: 'vite-plugin-react-server:server-component-update',
+          data: { file: normalizedFile, path: file },
+        });
+        
+        return []; // Don't trigger client-side page reload
+      }
+      
+      // Server/SSR environments: suppress page reload for all source files
+      // Server components are handled by the RSC refetch event sent above
+      // Invalidate the server module so next RSC request gets fresh content
+      if (envName === 'server') {
+        const mod = ctx.environment?.moduleGraph?.getModulesByFile(file);
+        if (mod) {
+          for (const m of mod) {
+            ctx.environment.moduleGraph.invalidateModule(m);
+          }
+        }
+      }
+      return [];
+    },
     handleHotUpdate({ file, server }: { file: string; server: ViteDevServer }) {
       const moduleBase = userOptions.moduleBase || "src";
       const projectRoot = userOptions.projectRoot || server.config.root;
       const normalizedFile = file.replace(projectRoot, '').replace(/^\/+/, '');
-      const isServerFile = normalizedFile.startsWith(moduleBase + '/') && 
+      const isSourceFile = normalizedFile.startsWith(moduleBase + '/') && 
         (file.endsWith('.tsx') || file.endsWith('.ts') || file.endsWith('.jsx') || file.endsWith('.js'));
       
-      if (isServerFile) {
-        server.config.logger.info(`[vite-plugin-react-server] Server component changed: ${normalizedFile}`);
+      // Skip client components — let @vitejs/plugin-react handle them
+      // with Fast Refresh (preserves component-level state).
+      const isClientFile = isSourceFile && (() => {
+        try {
+          const head = readFileSync(file, 'utf-8').slice(0, 200);
+          return /^\s*["']use client["']/.test(head.split('\n')[0]);
+        } catch { return false; }
+      })();
+      
+      if (isSourceFile && !isClientFile) {
+        server.config.logger.info(`[vite-plugin-react-server] File changed (RSC refetch): ${normalizedFile}`);
         
         // Send custom HMR event so client can refetch RSC stream
         server.ws.send({
@@ -58,13 +118,20 @@ export const vitePluginReactDevServer = function _vitePluginReactServerDevServer
         // The client will refetch the RSC stream via the custom event
         return [];
       }
+      
+      if (isClientFile) {
+        // Client components are handled by @vitejs/plugin-react (Fast Refresh)
+        // or Vite's client-side HMR. Return empty to prevent the server
+        // environment from triggering a full page reload.
+        return [];
+      }
     },
   };
 
   const serverPlugin = {
     name: "vite-plugin-react-server:dev-server-server",
     apply: "serve" as const,
-    applyToEnvironment(partialEnvironment: any) {
+applyToEnvironment(partialEnvironment: any) {
       return partialEnvironment?.consumer === 'server';
     },
     configureServer(server: ViteDevServer) {

package/plugin/helpers/requestInfo.ts

@@ -76,6 +76,8 @@ export function requestInfo(
   const hasJsonHeader = req.headers["accept"]?.includes("application/json");
   const hasHtmlHeader = req.headers.accept?.includes("text/html");
   const hasRscHeader = req.headers.accept?.includes("text/x-component");
+  // Support ?_rsc query param (e.g. /?_rsc for browser debugging) as alternative to Accept header (useful for browser debugging)
+  const hasRscQueryParam = /[?&]_rsc\b/.test(req.url || "");
   const hasCssHeader = req.headers.accept?.includes("text/css");
   const isFolder = !ext;
   const isFormContentType =
@@ -112,15 +114,16 @@ export function requestInfo(
   // Form action detection
 
   const isHtmlRequest =
-    isHtml ||
+    !hasRscQueryParam && (isHtml ||
     hasHtmlHeader ||
     (isFolder &&
       !hasRscHeader &&
+      !hasRscQueryParam &&
       !isRsc &&
       !isJsRequest &&
-      !isFormActionRequest);
+      !isFormActionRequest));
   const isRscRequest =
-    !isJsRequest && !isHtmlRequest && (isRsc || hasRscHeader);
+    hasRscQueryParam || (!isJsRequest && !isHtmlRequest && (isRsc || hasRscHeader));
   const isCssRequest =
     !isHtmlRequest &&
     !isRscRequest &&

package/plugin/helpers/requestToRoute.ts

@@ -7,8 +7,9 @@ export function requestToRoute(
     "moduleBasePath" | "moduleBaseURL" | "build"
   >
 ) {
-  let route = req.url
-    ?.replace(
+  // Strip query string before route matching
+  let route = req.url?.split("?")[0]
+    .replace(
       handlerOptions.moduleBaseURL + handlerOptions.build.rscOutputPath,
       ""
     )

package/plugin/react-static/plugin.server.ts

@@ -31,7 +31,8 @@ import type {
   AutoDiscoveredFiles,
   VitePluginFn,
 } from "../types.js";
-import { renderPages } from "./renderPages.js";
+import { renderPagesBatched } from "./renderPagesBatched.js";
+import { renderPages as renderPagesSequential } from "./renderPages.js";
 import { getBundleManifest } from "../helpers/getBundleManifest.js";
 import { createWorker } from "../worker/createWorker.js";
 import {
@@ -445,6 +446,14 @@ export const reactStaticPlugin: VitePluginFn = function _reactStaticPlugin(
           }
         }
 
+        // Select render mode based on build config
+        const renderMode = userOptions.build?.renderMode ?? "parallel";
+        const renderPages = renderMode === "sequential" ? renderPagesSequential : renderPagesBatched;
+
+        if (userOptions.verbose) {
+          logger.info(`[static] Using ${renderMode} rendering${renderMode === "parallel" ? ` (batch size: ${userOptions.build?.batchSize ?? 8})` : ""}`);
+        }
+
         // this will render the routes
         const renderPagesGenerator = renderPages(
           routes,
@@ -465,6 +474,7 @@ export const reactStaticPlugin: VitePluginFn = function _reactStaticPlugin(
             staticManifest: staticManifest, // Pass static manifest for path resolution
             autoDiscoveredFiles: autoDiscoveredFiles!,
             cssFilesByPage: cssFilesByPage,
+            batchSize: userOptions.build?.batchSize,
           },
           renderPage
         );