@modern-js/runtime 2.64.0 → 2.64.2

package/dist/esm/core/server/stream/afterTemplate.js

@@ -31,6 +31,11 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
       return _ts_generator(this, function(_state) {
         routeManifest = runtimeContext.routeManifest;
         routeAssets = routeManifest.routeAssets;
+        if (!routeAssets)
+          return [
+            2,
+            template
+          ];
         asyncEntry = routeAssets["async-".concat(entryName2)];
         if (asyncEntry) {
           ;

package/dist/esm/core/server/stream/createReadableStream.worker.js

@@ -1,20 +1,20 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { renderSSRStream } from "@modern-js/render/ssr";
 import checkIsBot from "isbot";
-import { renderToReadableStream } from "react-dom/server";
 import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { RenderLevel } from "../../constants";
 import { ShellChunkStatus, encodeForWebStream, getReadableStreamFromString } from "./shared";
 import { getTemplates } from "./template";
 var createReadableStreamFromElement = function() {
   var _ref = _async_to_generator(function(request, rootElement, options) {
-    var shellChunkStatus, chunkVec, htmlTemplate, runtimeContext, config, ssrConfig, entryName, _ref2, shellBefore, shellAfter, _options_onShellReady, readableOriginal, isbot, reader, stream, e, fallbackHtml, stream1;
+    var shellChunkStatus, chunkVec, htmlTemplate, runtimeContext, config, ssrConfig, entryName, rscRoot, _ref2, shellBefore, shellAfter, _options_onShellReady, readableOriginal, isbot, reader, stream, e, fallbackHtml, stream1;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
         case 0:
           shellChunkStatus = ShellChunkStatus.START;
           chunkVec = [];
-          htmlTemplate = options.htmlTemplate, runtimeContext = options.runtimeContext, config = options.config, ssrConfig = options.ssrConfig, entryName = options.entryName;
+          htmlTemplate = options.htmlTemplate, runtimeContext = options.runtimeContext, config = options.config, ssrConfig = options.ssrConfig, entryName = options.entryName, rscRoot = options.rscRoot;
           return [
             4,
             getTemplates(htmlTemplate, {
@@ -38,8 +38,12 @@ var createReadableStreamFromElement = function() {
           ]);
           return [
             4,
-            renderToReadableStream(rootElement, {
+            renderSSRStream(rootElement, {
+              request,
+              clientManifest: options.rscClientManifest,
+              ssrManifest: options.rscSSRManifest,
               nonce: config.nonce,
+              rscRoot,
               onError: function onError(error) {
                 var _options_onError;
                 (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
@@ -95,7 +99,7 @@ var createReadableStreamFromElement = function() {
                           chunk = new TextDecoder().decode(value);
                           chunkVec.push(chunk);
                           concatedChunk = chunkVec.join("");
-                          if (concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
+                          if (concatedChunk.includes(ESCAPED_SHELL_STREAM_END_MARK)) {
                             concatedChunk = concatedChunk.replace(ESCAPED_SHELL_STREAM_END_MARK, "");
                             shellChunkStatus = ShellChunkStatus.FINISH;
                             controller.enqueue(encodeForWebStream("".concat(shellBefore).concat(concatedChunk).concat(shellAfter)));

package/dist/esm/core/server/stream/index.js

@@ -1,5 +1,9 @@
-import { createReadableStreamFromElement } from "./createReadableStream";
 import { createRenderStreaming } from "./shared";
+var createReadableStreamFromElement = process.env.MODERN_SSR_ENV === "edge" ? import("./createReadableStream.worker").then(function(m) {
+  return m.createReadableStreamFromElement;
+}) : import("./createReadableStream").then(function(m) {
+  return m.createReadableStreamFromElement;
+});
 var renderStreaming = createRenderStreaming(createReadableStreamFromElement);
 export {
   renderStreaming

package/dist/esm/core/server/stream/shared.js

@@ -1,10 +1,11 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { run } from "@modern-js/runtime-utils/node";
 import { time } from "@modern-js/runtime-utils/time";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
 import { wrapRuntimeContextProvider } from "../../react/wrapper";
-import { SSRErrors, SSRTimings, createOnError, createOnTiming } from "../tracer";
+import { SSRErrors, SSRTimings } from "../tracer";
 import { getSSRConfigByEntry } from "../utils";
 var ShellChunkStatus;
 (function(ShellChunkStatus2) {
@@ -30,62 +31,83 @@ function getReadableStreamFromString(content) {
   });
   return readableStream;
 }
-function createRenderStreaming(createReadableStreamFromElement) {
+function createRenderStreaming(createReadableStreamPromise) {
   return function() {
     var _ref = _async_to_generator(function(request, serverRoot, options) {
-      var headersData;
+      var createReadableStreamFromElement, headersData;
       return _ts_generator(this, function(_state) {
-        headersData = parseHeaders(request);
-        return [
-          2,
-          run(headersData, /* @__PURE__ */ _async_to_generator(function() {
-            var end, runtimeContext, config, resource, onError, onTiming, htmlTemplate, entryName, ssrConfig, rootElement, stream;
-            return _ts_generator(this, function(_state2) {
-              switch (_state2.label) {
-                case 0:
-                  end = time();
-                  runtimeContext = options.runtimeContext, config = options.config, resource = options.resource;
-                  onError = createOnError(options.onError);
-                  onTiming = createOnTiming(options.onTiming);
-                  htmlTemplate = resource.htmlTemplate, entryName = resource.entryName;
-                  ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
-                  rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
-                    ssr: true
-                  }));
-                  return [
-                    4,
-                    createReadableStreamFromElement(request, rootElement, {
-                      config,
-                      htmlTemplate,
-                      runtimeContext,
-                      ssrConfig,
-                      entryName,
-                      onShellReady: function onShellReady() {
-                        var cost = end();
-                        onTiming(SSRTimings.RENDER_SHELL, cost);
-                      },
-                      onAllReady: function onAllReady() {
-                        var cost = end();
-                        onTiming(SSRTimings.RENDER_HTML, cost);
-                      },
-                      onShellError: function onShellError(error) {
-                        onError(SSRErrors.RENDER_SHELL, error);
-                      },
-                      onError: function onError1(error) {
-                        onError(SSRErrors.RENDER_STREAM, error);
-                      }
-                    })
-                  ];
-                case 1:
-                  stream = _state2.sent();
-                  return [
-                    2,
-                    stream
-                  ];
-              }
-            });
-          }))
-        ];
+        switch (_state.label) {
+          case 0:
+            return [
+              4,
+              createReadableStreamPromise
+            ];
+          case 1:
+            createReadableStreamFromElement = _state.sent();
+            headersData = parseHeaders(request);
+            return [
+              2,
+              run(headersData, /* @__PURE__ */ _async_to_generator(function() {
+                var end, runtimeContext, config, resource, onError, onTiming, htmlTemplate, entryName, ssrConfig, RSCServerRoot, rootElement, stream;
+                return _ts_generator(this, function(_state2) {
+                  switch (_state2.label) {
+                    case 0:
+                      end = time();
+                      runtimeContext = options.runtimeContext, config = options.config, resource = options.resource;
+                      onError = options.onError, onTiming = options.onTiming;
+                      htmlTemplate = resource.htmlTemplate, entryName = resource.entryName;
+                      ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
+                      RSCServerRoot = function(param) {
+                        var children = param.children;
+                        return /* @__PURE__ */ _jsx(_Fragment, {
+                          children
+                        });
+                      };
+                      rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+                        ssr: true
+                      }));
+                      rootElement = /* @__PURE__ */ _jsx(RSCServerRoot, {
+                        children: rootElement
+                      });
+                      return [
+                        4,
+                        createReadableStreamFromElement(request, rootElement, {
+                          config,
+                          htmlTemplate,
+                          runtimeContext,
+                          ssrConfig,
+                          entryName,
+                          rscClientManifest: options.rscClientManifest,
+                          rscSSRManifest: options.rscSSRManifest,
+                          rscServerManifest: options.rscServerManifest,
+                          rscRoot: options.rscRoot,
+                          onShellReady: function onShellReady() {
+                            var cost = end();
+                            onTiming(SSRTimings.RENDER_SHELL, cost);
+                          },
+                          onAllReady: function onAllReady() {
+                            var cost = end();
+                            onTiming(SSRTimings.RENDER_HTML, cost);
+                          },
+                          onShellError: function onShellError(error) {
+                            onError(error, SSRErrors.RENDER_SHELL);
+                          },
+                          onError: function onError1(error) {
+                            onError(error, SSRErrors.RENDER_STREAM);
+                          }
+                        })
+                      ];
+                    case 1:
+                      stream = _state2.sent();
+                      return [
+                        2,
+                        stream
+                      ];
+                  }
+                });
+              }))
+            ];
+        }
       });
     });
     return function(request, serverRoot, options) {

package/dist/esm/core/server/string/index.js

@@ -11,7 +11,7 @@ import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants";
 import { createReplaceHelemt } from "../helmet";
 import { buildHtml } from "../shared";
-import { SSRErrors, SSRTimings, createOnError, createOnTiming } from "../tracer";
+import { SSRErrors, SSRTimings } from "../tracer";
 import { getSSRConfigByEntry, safeReplace } from "../utils";
 import { LoadableCollector } from "./loadable";
 import { prefetch } from "./prefetch";
@@ -31,8 +31,8 @@ var renderString = function() {
               case 0:
                 resource = options.resource, runtimeContext = options.runtimeContext, config = options.config, onError = options.onError, onTiming = options.onTiming;
                 tracer = {
-                  onError: createOnError(onError),
-                  onTiming: createOnTiming(onTiming)
+                  onError,
+                  onTiming
                 };
                 routerContext = runtimeContext.routerContext;
                 htmlTemplate = resource.htmlTemplate, entryName = resource.entryName, loadableStats = resource.loadableStats, routeManifest = resource.routeManifest;
@@ -66,7 +66,7 @@ var renderString = function() {
               case 3:
                 e = _state2.sent();
                 chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
-                tracer.onError(SSRErrors.PRERENDER, e);
+                tracer.onError(e, SSRErrors.PRERENDER);
                 return [
                   3,
                   4
@@ -143,7 +143,7 @@ function _generateHtml() {
             onTiming(SSRTimings.RENDER_HTML, cost);
           } catch (e) {
             chunkSet.renderLevel = RenderLevel.CLIENT_RENDER;
-            onError(SSRErrors.RENDER_HTML, e);
+            onError(e, SSRErrors.RENDER_HTML);
           }
           return [
             4,

package/dist/esm/core/server/string/prefetch.js

@@ -44,7 +44,7 @@ var prefetch = function() {
                     onTiming(SSRTimings.PRERENDER, cost);
                   } catch (e2) {
                     error = e2;
-                    onError(SSRErrors.PRERENDER, error);
+                    onError(error, SSRErrors.PRERENDER);
                     throw e2;
                   }
                 }
@@ -81,13 +81,13 @@ var prefetch = function() {
                 ];
               case 3:
                 e = _state2.sent();
-                onError(SSRErrors.USE_LOADER, e);
+                onError(e, SSRErrors.USE_LOADER);
                 throw e;
               case 4:
                 Object.keys(loadersData).forEach(function(id) {
                   var data = loadersData[id];
                   if (data._error) {
-                    onError(SSRErrors.USE_LOADER, data._error);
+                    onError(data._error, SSRErrors.USE_LOADER);
                     delete data._error;
                   }
                 });

package/dist/esm/core/server/tracer.js

@@ -1,4 +1,3 @@
-import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 var SSRTimings;
 (function(SSRTimings2) {
   SSRTimings2["PRERENDER"] = "ssr-prerender";
@@ -13,22 +12,9 @@ var SSRErrors;
   SSRErrors2["RENDER_HTML"] = "App Render To HTML";
   SSRErrors2["RENDER_STREAM"] = "An error occurs during streaming SSR";
   SSRErrors2["RENDER_SHELL"] = "An error occurs during streaming render shell";
+  SSRErrors2["LOADER_ERROR"] = "App error occurs during data loader";
 })(SSRErrors || (SSRErrors = {}));
-function createOnError(onError) {
-  return function(key, e) {
-    var error = _instanceof(e, Error) ? e : new Error("Unexpected Server Error");
-    error.name = key;
-    onError === null || onError === void 0 ? void 0 : onError(e);
-  };
-}
-function createOnTiming(onTiming) {
-  return function(key, cost) {
-    onTiming === null || onTiming === void 0 ? void 0 : onTiming(key, cost);
-  };
-}
 export {
   SSRErrors,
-  SSRTimings,
-  createOnError,
-  createOnTiming
+  SSRTimings
 };

package/dist/esm/router/cli/code/index.js

@@ -242,7 +242,7 @@ var generateCode = function() {
   };
 }();
 function generatorRegisterCode(internalDirectory, entryName, code) {
-  fs.outputFileSync(path.resolve(internalDirectory, "./".concat(entryName, "/").concat(ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME)), code, "utf8");
+  fs.outputFileSync(path.resolve(internalDirectory, "./".concat(entryName, "/").concat(ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ".js")), code, "utf8");
 }
 export {
   generateCode,

package/dist/esm/rsc/client.js

@@ -0,0 +1 @@
+export * from "@modern-js/render/client";

package/dist/esm/rsc/server.js

@@ -0,0 +1 @@
+export * from "@modern-js/render/rsc";

package/dist/esm/state/cli/index.js

@@ -11,8 +11,8 @@ var statePlugin = function() {
         var entrypoint = param.entrypoint, plugins = param.plugins;
         var _getEntryOptions;
         var entryName = entrypoint.entryName, isMainEntry = entrypoint.isMainEntry;
-        var userConfig = api.useResolvedConfigContext();
-        var _api_useAppContext = api.useAppContext(), packageName = _api_useAppContext.packageName, metaName = _api_useAppContext.metaName;
+        var userConfig = api.getNormalizedConfig();
+        var _api_getAppContext = api.getAppContext(), packageName = _api_getAppContext.packageName, metaName = _api_getAppContext.metaName;
         var stateConfig = (_getEntryOptions = getEntryOptions(entryName, isMainEntry, userConfig.runtime, userConfig.runtimeByEntries, packageName)) === null || _getEntryOptions === void 0 ? void 0 : _getEntryOptions.state;
         if (stateConfig) {
           plugins.push({

package/dist/esm-node/cli/code.js

@@ -22,7 +22,7 @@ function getSSRMode(entry, config) {
 const generateCode = async (entrypoints, appContext, config, hooks) => {
   const { mountId } = config.html;
   const { enableAsyncEntry } = config.source;
-  const { runtimeConfigFile, internalDirectory, internalSrcAlias, metaName, srcDirectory } = appContext;
+  const { runtimeConfigFile, internalDirectory, internalSrcAlias, metaName, srcDirectory, serverRoutes } = appContext;
   await Promise.all(entrypoints.map(async (entrypoint) => {
     const { entryName, isAutoMount, entry, customEntry, customBootstrap, customServerEntry } = entrypoint;
     const { plugins: runtimePlugins } = await hooks._internalRuntimePlugins.call({
@@ -30,25 +30,37 @@ const generateCode = async (entrypoints, appContext, config, hooks) => {
       plugins: []
     });
     if (isAutoMount) {
-      const indexCode = template.index({
-        srcDirectory,
-        internalSrcAlias,
-        metaName,
-        entry,
-        entryName,
-        customEntry,
-        customBootstrap,
-        mountId
-      });
-      const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
-      fs.outputFileSync(indexFile, indexCode, "utf8");
       const ssrMode = getSSRMode(entryName, config);
+      let indexCode = "";
+      if (!ssrMode && config.server.rsc) {
+        var _serverRoutes_find;
+        indexCode = template.entryForCSRWithRSC({
+          metaName,
+          entryName,
+          mountId,
+          urlPath: (_serverRoutes_find = serverRoutes.find((route) => route.entryName === entryName)) === null || _serverRoutes_find === void 0 ? void 0 : _serverRoutes_find.urlPath
+        });
+      } else {
+        indexCode = template.index({
+          srcDirectory,
+          internalSrcAlias,
+          metaName,
+          entry,
+          entryName,
+          customEntry,
+          customBootstrap,
+          mountId,
+          enableRsc: config.server.rsc
+        });
+      }
+      const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
+      await fs.outputFile(indexFile, indexCode, "utf8");
       if (enableAsyncEntry) {
         const bootstrapFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_BOOTSTRAP_FILE_NAME}`);
-        fs.outputFileSync(bootstrapFile, `import(/* webpackChunkName: "async-${entryName}" */ './${INDEX_FILE_NAME}');`, "utf8");
+        await fs.outputFile(bootstrapFile, `import(/* webpackChunkName: "async-${entryName}" */ './${INDEX_FILE_NAME}');`, "utf8");
         const bootstrapServerFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_SERVER_BOOTSTRAP_FILE_NAME}`);
         if (ssrMode) {
-          fs.outputFileSync(bootstrapServerFile, `export const requestHandler = import('./${SERVER_ENTRY_POINT_FILE_NAME}').then((m) => m.requestHandler)`, "utf8");
+          await fs.outputFile(bootstrapServerFile, `export const requestHandler = import('./${SERVER_ENTRY_POINT_FILE_NAME}').then((m) => m.requestHandler)`, "utf8");
         }
       }
       if (ssrMode) {
@@ -59,14 +71,21 @@ const generateCode = async (entrypoints, appContext, config, hooks) => {
           metaName,
           mode: ssrMode,
           customServerEntry,
-          srcDirectory
+          srcDirectory,
+          enableRsc: config.server.rsc
         });
         const indexServerFile = path.resolve(internalDirectory, `./${entryName}/${SERVER_ENTRY_POINT_FILE_NAME}`);
-        fs.outputFileSync(indexServerFile, indexServerCode, "utf8");
+        await fs.outputFile(indexServerFile, indexServerCode, "utf8");
+      } else if (config.server.rsc) {
+        const indexServerFile = path.resolve(internalDirectory, `./${entryName}/${SERVER_ENTRY_POINT_FILE_NAME}`);
+        const indexServerCode = serverTemplate.entryForCSRWithRSC({
+          metaName
+        });
+        await fs.outputFile(indexServerFile, indexServerCode, "utf8");
       }
       const registerCode = template.register();
       const registerFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_REGISTER_FILE_NAME}`);
-      fs.outputFileSync(registerFile, registerCode, "utf8");
+      await fs.outputFile(registerFile, registerCode, "utf8");
       const registerRuntimeCode = template.runtimeRegister({
         entryName,
         srcDirectory,
@@ -76,16 +95,36 @@ const generateCode = async (entrypoints, appContext, config, hooks) => {
         runtimePlugins
       });
       const registerRuntimeFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME}`);
-      fs.outputFileSync(registerRuntimeFile, registerRuntimeCode, "utf8");
-      const contextCode = template.runtimeGlobalContext({
-        srcDirectory,
-        internalSrcAlias,
-        metaName,
-        entry,
-        customEntry
-      });
-      const contextFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}`);
-      fs.outputFileSync(contextFile, contextCode, "utf8");
+      await fs.outputFile(registerRuntimeFile, registerRuntimeCode, "utf8");
+      let contextCode = "";
+      if (!config.server.rsc) {
+        contextCode = template.runtimeGlobalContext({
+          srcDirectory,
+          internalSrcAlias,
+          metaName,
+          entry,
+          customEntry
+        });
+      } else {
+        const AppProxyPath = path.join(internalDirectory, entryName, "./AppProxy.jsx");
+        const appProxyCode = template.AppProxyForRSC({
+          srcDirectory,
+          internalSrcAlias,
+          entry,
+          customEntry
+        });
+        await fs.outputFile(AppProxyPath, appProxyCode);
+        contextCode = template.runtimeGlobalContextForRSCClient({
+          metaName
+        });
+        const contextServerCode = template.runtimeGlobalContextForRSCServer({
+          metaName
+        });
+        const contextFile2 = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}.server.js`);
+        await fs.outputFile(contextFile2, contextServerCode, "utf8");
+      }
+      const contextFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}.js`);
+      await fs.outputFile(contextFile, contextCode, "utf8");
     }
   }));
 };

package/dist/esm-node/cli/constants.js

@@ -5,7 +5,7 @@ const INDEX_FILE_NAME = "index";
 const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.jsx";
 const ENTRY_SERVER_BOOTSTRAP_FILE_NAME = "bootstrap.server.jsx";
 const ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME = "runtime-register.js";
-const ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME = "runtime-global-context.js";
+const ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME = "runtime-global-context";
 const ENTRY_POINT_REGISTER_FILE_NAME = "register.js";
 export {
   APP_FILE_NAME,

package/dist/esm-node/cli/ssr/index.js

@@ -23,13 +23,16 @@ const ssrBuilderPlugin = (modernAPI) => ({
   name: "@modern-js/builder-plugin-ssr",
   setup(api) {
     api.modifyEnvironmentConfig((config, { name, mergeEnvironmentConfig }) => {
+      var _userConfig_deploy_worker, _userConfig_deploy, _userConfig_server;
       const isServerEnvironment = config.output.target === "node" || name === "workerSSR";
       const userConfig = modernAPI.getNormalizedConfig();
+      const ssrEnv = ((_userConfig_deploy = userConfig.deploy) === null || _userConfig_deploy === void 0 ? void 0 : (_userConfig_deploy_worker = _userConfig_deploy.worker) === null || _userConfig_deploy_worker === void 0 ? void 0 : _userConfig_deploy_worker.ssr) || ((_userConfig_server = userConfig.server) === null || _userConfig_server === void 0 ? void 0 : _userConfig_server.rsc) ? "edge" : "node";
       const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig);
       return mergeEnvironmentConfig(config, {
         source: {
           define: {
-            "process.env.MODERN_TARGET": isServerEnvironment ? JSON.stringify("node") : JSON.stringify("browser")
+            "process.env.MODERN_TARGET": isServerEnvironment ? JSON.stringify("node") : JSON.stringify("browser"),
+            "process.env.MODERN_SSR_ENV": JSON.stringify(ssrEnv)
           }
         },
         tools: {

package/dist/esm-node/cli/template.js

@@ -1,19 +1,59 @@
 import path from "path";
 import { JS_EXTENSIONS, findExists, formatImportPath } from "@modern-js/utils";
 import { ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME } from "./constants";
-const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId }) => {
+const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId, enableRsc }) => {
   if (customEntry) {
     return `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'`;
   }
   return `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
+
+${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer } from '@${metaName}/runtime/rsc/client';` : ""}
+
+${enableRsc ? `const data = createFromReadableStream(rscStream, {
+    callServer: callServer,
+  });` : ""}
+
 ${customBootstrap ? `import customBootstrap from '${formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias))}';` : ""}
 
+
+
 const ModernRoot = createRoot();
 
-${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : `render(<ModernRoot />, '${mountId || "root"}');`}`;
+${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : enableRsc ? `render(<ModernRoot>
+                  <RscClientRoot data={data} />
+                </ModernRoot>, '${mountId || "root"}');` : `render(<ModernRoot />, '${mountId || "root"}');`}`;
+};
+const entryForCSRWithRSC = ({ metaName, entryName, urlPath = "/", mountId = "root" }) => {
+  return `
+  import '@${metaName}/runtime/registry/${entryName}';
+  import { render } from '@${metaName}/runtime/browser';
+  import { createRoot } from '@${metaName}/runtime/react';
+
+  import {
+    RscClientRoot,
+    createFromFetch
+  } from '@${metaName}/runtime/rsc/client';
+
+  const content = createFromFetch(
+    fetch('${urlPath}', {
+      headers: {
+        'x-rsc-tree': 'true',
+      },
+    }),
+  );
+
+  const ModernRoot = createRoot();
+
+  render(
+    <ModernRoot>
+      <RscClientRoot data={content} />
+    </ModernRoot>,
+    '${mountId}',
+  );
+  `;
 };
-const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId }) => `import '@${metaName}/runtime/registry/${entryName}';
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, enableRsc }) => `import '@${metaName}/runtime/registry/${entryName}';
 ${genRenderCode({
   srcDirectory,
   internalSrcAlias,
@@ -21,7 +61,8 @@ ${genRenderCode({
   entry,
   customEntry,
   customBootstrap,
-  mountId
+  mountId,
+  enableRsc
 })}
 `;
 const register = () => `import './${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}';
@@ -59,9 +100,51 @@ setGlobalContext({
   App,
 });`;
 };
+const runtimeGlobalContextForRSCServer = ({ metaName }) => {
+  return `
+  import { createElement, Fragment } from 'react';
+  import { setGlobalContext } from '@${metaName}/runtime/context';
+  import AppProxy from './AppProxy';
+
+  const DefaultRoot = ({ children }: { children?: ReactNode }) =>
+    createElement(Fragment, null, children);
+
+
+  setGlobalContext({
+    App: DefaultRoot,
+    RSCRoot: AppProxy,
+  });`;
+};
+const runtimeGlobalContextForRSCClient = ({ metaName }) => {
+  return `
+  import { createElement, Fragment } from 'react';
+  import { setGlobalContext } from '@${metaName}/runtime/context';
+
+  const DefaultRoot = ({ children }: { children?: ReactNode }) =>
+    createElement(Fragment, null, children);
+
+  setGlobalContext({
+    App: DefaultRoot
+  });`;
+};
+const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry }) => {
+  return `
+  import App from '${// We need to get the path of App.tsx here, but the entry is `src/entry.tsx`
+  formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, "App").replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace(".tsx", ""))}';
+  import React from 'react';
+
+  export default function Root() {
+    return React.createElement(App, null);
+  }
+  `;
+};
 export {
+  AppProxyForRSC,
+  entryForCSRWithRSC,
   index,
   register,
   runtimeGlobalContext,
+  runtimeGlobalContextForRSCClient,
+  runtimeGlobalContextForRSCServer,
   runtimeRegister
 };