@modern-js/runtime 3.0.4 → 3.1.0

package/dist/cjs/core/browser/index.js

@@ -39,6 +39,7 @@ __webpack_require__.d(__webpack_exports__, {
     renderWithReact18: ()=>renderWithReact18,
     renderWithReact17: ()=>renderWithReact17
 });
+const constants_namespaceObject = require("@modern-js/utils/universal/constants");
 const external_cookie_namespaceObject = require("cookie");
 var external_cookie_default = /*#__PURE__*/ __webpack_require__.n(external_cookie_namespaceObject);
 const index_js_namespaceObject = require("../context/index.js");
@@ -128,7 +129,9 @@ async function renderWithReact17(App, rootElement) {
 }
 async function hydrateWithReact18(App, rootElement) {
     const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.hydrateRoot(rootElement, App);
+    const root = ReactDOM.hydrateRoot(rootElement, App, {
+        identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX
+    });
     return root;
 }
 async function hydrateWithReact17(App, rootElement, callback) {

package/dist/cjs/core/server/stream/createReadableStream.js

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const external_stream_namespaceObject = require("stream");
 const node_namespaceObject = require("@modern-js/runtime-utils/node");
+const constants_namespaceObject = require("@modern-js/utils/universal/constants");
 const external_common_js_namespaceObject = require("../../../common.js");
 const external_constants_js_namespaceObject = require("../../constants.js");
 const index_js_namespaceObject = require("../../context/index.js");
@@ -65,6 +66,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
     return new Promise((resolve)=>{
         const { pipe: reactStreamingPipe } = renderToPipeableStream(processedRootElement, {
             nonce: config.nonce,
+            identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX,
             [onReady] () {
                 let styledComponentsStyleTags = '';
                 extenders.forEach((extender)=>{

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

@@ -36,6 +36,7 @@ __webpack_require__.d(__webpack_exports__, {
     renderString: ()=>renderString
 });
 const time_namespaceObject = require("@modern-js/runtime-utils/time");
+const constants_namespaceObject = require("@modern-js/utils/universal/constants");
 const server_namespaceObject = require("react-dom/server");
 var server_default = /*#__PURE__*/ __webpack_require__.n(server_namespaceObject);
 const external_react_helmet_namespaceObject = require("react-helmet");
@@ -104,7 +105,9 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
     try {
         const end = (0, time_namespaceObject.time)();
-        html = server_default().renderToString(finalApp);
+        html = server_default().renderToString(finalApp, {
+            identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX
+        });
         chunkSet.renderLevel = external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER;
         helmetData = external_react_helmet_default().renderStatic();
         const cost = end();

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

@@ -130,7 +130,9 @@ const generateCode = async (appContext, config, entrypoints, api)=>{
                         entryName: entrypoint.entryName,
                         internalDirectory,
                         splitRouteChunks: config?.output?.splitRouteChunks,
-                        isRscClient: (0, utils_namespaceObject.isUseRsc)(config)
+                        isRscClientBundle: (0, utils_namespaceObject.isUseRsc)(config),
+                        srcDirectory,
+                        internalSrcAlias: appContext.internalSrcAlias
                     })
                 });
                 if (entrypoint.nestedRoutesEntry && ((0, utils_namespaceObject.isUseSSRBundle)(config) || (0, utils_namespaceObject.isUseRsc)(config))) {
@@ -150,13 +152,15 @@ const generateCode = async (appContext, config, entrypoints, api)=>{
                         entryName: entrypoint.entryName,
                         internalDirectory,
                         splitRouteChunks: config?.output?.splitRouteChunks,
-                        isRscClient: false
+                        isRscClientBundle: false,
+                        srcDirectory,
+                        internalSrcAlias: appContext.internalSrcAlias
                     });
                     await utils_namespaceObject.fs.outputFile(external_path_default().resolve(internalDirectory, `./${entryName}/routes.server.js`), serverRoutesCode, 'utf8');
                 }
                 const serverLoaderCombined = external_templates_js_namespaceObject.ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext);
                 if (serverLoaderCombined) {
-                    const serverLoaderFile = (0, external_utils_js_namespaceObject.getServerCombinedModueFile)(internalDirectory, entryName);
+                    const serverLoaderFile = (0, external_utils_js_namespaceObject.getServerCombinedModuleFile)(internalDirectory, entryName);
                     await utils_namespaceObject.fs.outputFile(serverLoaderFile, serverLoaderCombined);
                 }
                 await utils_namespaceObject.fs.outputFile(external_path_default().resolve(internalDirectory, `./${entryName}/${external_constants_js_namespaceObject.FILE_SYSTEM_ROUTES_FILE_NAME}`), code, 'utf8');

package/dist/cjs/router/cli/code/templates.js

@@ -38,6 +38,7 @@ __webpack_require__.d(__webpack_exports__, {
     routesForServer: ()=>routesForServer,
     fileSystemRoutes: ()=>fileSystemRoutes
 });
+const promises_namespaceObject = require("node:fs/promises");
 const external_path_namespaceObject = require("path");
 var external_path_default = /*#__PURE__*/ __webpack_require__.n(external_path_namespaceObject);
 const utils_namespaceObject = require("@modern-js/utils");
@@ -111,7 +112,25 @@ const routesForServer = ({ routesForServerLoaderMatches })=>{
   `;
 };
 const createMatchReg = (keyword)=>new RegExp(`("${keyword}":\\s)"([^\n]+)"`, 'g');
-const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks = true, isRscClient = false })=>{
+async function hasUseClientDirective(componentPath, srcDirectory, internalSrcAlias) {
+    let realPath = componentPath;
+    if (internalSrcAlias && srcDirectory && realPath.startsWith(internalSrcAlias)) realPath = external_path_default().join(srcDirectory, realPath.slice(internalSrcAlias.length));
+    const filePath = (0, utils_namespaceObject.findExists)(utils_namespaceObject.JS_EXTENSIONS.map((ext)=>`${realPath}${ext}`));
+    if (!filePath) return false;
+    let fh;
+    try {
+        fh = await (0, promises_namespaceObject.open)(filePath, 'r');
+        const buf = Buffer.alloc(64);
+        const { bytesRead } = await fh.read(buf, 0, 64, 0);
+        const content = buf.toString('utf-8', 0, bytesRead).trimStart();
+        return content.startsWith("'use client'") || content.startsWith('"use client"');
+    } catch  {
+        return false;
+    } finally{
+        await fh?.close();
+    }
+}
+const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, splitRouteChunks = true, isRscClientBundle = false, srcDirectory, internalSrcAlias })=>{
     const components = [];
     const loadings = [];
     const errors = [];
@@ -136,9 +155,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
         const importOptions = webpackChunkName ? `/* webpackChunkName: "${routeId}" */  ` : eager ? '/* webpackMode: "eager" */  ' : '';
         return `() => import(${importOptions}'${componentPath}').then(routeModule => handleRouteModule(routeModule, "${routeId}")).catch(handleRouteModuleError)`;
     };
-    const traverseRouteTree = (route, isRscClient)=>{
+    const traverseRouteTree = async (route, isRscClientBundle)=>{
         let children;
-        if ('children' in route && route.children) children = route?.children?.map((child)=>traverseRouteTree(child, isRscClient));
+        if ('children' in route && route.children) children = await Promise.all(route.children.map((child)=>traverseRouteTree(child, isRscClientBundle)));
         let loading;
         let error;
         let loader;
@@ -210,6 +229,8 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
             components.push(route._component);
             component = `component_${components.length - 1}`;
         }
+        const isClientComponent = 'nested' === route.type && Boolean(route._component) && Boolean(srcDirectory) && Boolean(internalSrcAlias) && await hasUseClientDirective(route._component, srcDirectory, internalSrcAlias);
+        const shouldIncludeClientBundle = !isRscClientBundle || isClientComponent;
         const finalRoute = {
             ...route,
             loading,
@@ -217,10 +238,17 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
             action,
             config,
             error,
-            children
+            children,
+            ...isClientComponent && {
+                isClientComponent: true
+            },
+            ...shouldIncludeClientBundle && {
+                lazyImport
+            },
+            ...shouldIncludeClientBundle && route._component && {
+                component
+            }
         };
-        if (!isRscClient) finalRoute.lazyImport = lazyImport;
-        if (route._component && !isRscClient) finalRoute.component = component;
         if ('nested' === route.type && route._component && (route.loader || route.data)) finalRoute.shouldRevalidate = `createShouldRevalidate("${route.id}")`;
         return finalRoute;
     };
@@ -228,7 +256,7 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
     export const routes = [
   `;
     for (const route of routes)if ('type' in route) {
-        const newRoute = traverseRouteTree(route, isRscClient);
+        const newRoute = await traverseRouteTree(route, isRscClientBundle);
         const routeStr = JSON.stringify(newRoute, null, 2);
         const keywords = [
             'component',
@@ -303,9 +331,9 @@ const fileSystemRoutes = async ({ metaName, routes, ssrMode, nestedRoutesEntry,
   `;
     return `
     ${importLazyCode}
-    ${!isRscClient ? importComponentsCode : ''}
+    ${!isRscClientBundle ? importComponentsCode : ''}
     ${importRuntimeRouterCode}
-    ${!isRscClient ? rootLayoutCode : ''}
+    ${!isRscClientBundle ? rootLayoutCode : ''}
     ${importLoadingCode}
     ${importErrorComponentsCode}
     ${importLoadersCode}

package/dist/cjs/router/cli/code/utils.js

@@ -34,10 +34,10 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     parseModule: ()=>parseModule,
+    getServerCombinedModuleFile: ()=>getServerCombinedModuleFile,
     hasLoader: ()=>hasLoader,
-    isPageComponentFile: ()=>isPageComponentFile,
     getPathWithoutExt: ()=>getPathWithoutExt,
-    getServerCombinedModueFile: ()=>getServerCombinedModueFile,
+    isPageComponentFile: ()=>isPageComponentFile,
     getServerLoadersFile: ()=>getServerLoadersFile,
     walkDirectory: ()=>walkDirectory,
     hasAction: ()=>hasAction,
@@ -112,13 +112,13 @@ const hasAction = async (filename, source)=>{
     return false;
 };
 const getServerLoadersFile = (internalDirectory, entryName)=>external_path_default().join(internalDirectory, entryName, 'route-server-loaders.js');
-const getServerCombinedModueFile = (internalDirectory, entryName)=>external_path_default().join(internalDirectory, entryName, 'server-loader-combined.js');
+const getServerCombinedModuleFile = (internalDirectory, entryName)=>external_path_default().join(internalDirectory, entryName, 'server-loader-combined.js');
 const getPathWithoutExt = (filename)=>{
     const extname = external_path_default().extname(filename);
     return extname ? filename.slice(0, -extname.length) : filename;
 };
 exports.getPathWithoutExt = __webpack_exports__.getPathWithoutExt;
-exports.getServerCombinedModueFile = __webpack_exports__.getServerCombinedModueFile;
+exports.getServerCombinedModuleFile = __webpack_exports__.getServerCombinedModuleFile;
 exports.getServerLoadersFile = __webpack_exports__.getServerLoadersFile;
 exports.hasAction = __webpack_exports__.hasAction;
 exports.hasLoader = __webpack_exports__.hasLoader;
@@ -128,7 +128,7 @@ exports.replaceWithAlias = __webpack_exports__.replaceWithAlias;
 exports.walkDirectory = __webpack_exports__.walkDirectory;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "getPathWithoutExt",
-    "getServerCombinedModueFile",
+    "getServerCombinedModuleFile",
     "getServerLoadersFile",
     "hasAction",
     "hasLoader",

package/dist/cjs/router/runtime/rsc-router.js

@@ -45,8 +45,9 @@ const router_namespaceObject = require("@modern-js/runtime-utils/router");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const external_CSSLinks_js_namespaceObject = require("./CSSLinks.js");
-const safeUse = (promise)=>{
-    if ('function' == typeof external_react_default().use) return external_react_default().use(promise);
+const safeUse = (value)=>{
+    const reactUse = external_react_default().use;
+    if ('function' == typeof reactUse) return reactUse(value);
     return null;
 };
 function collectCssFilesFromRoutes(matches, routes) {
@@ -64,6 +65,17 @@ function collectCssFilesFromRoutes(matches, routes) {
 }
 const createServerPayload = (routerContext, routes)=>{
     const cssFiles = collectCssFilesFromRoutes(routerContext.matches, routes);
+    let cssInjectionIndex = -1;
+    if (cssFiles.length > 0) {
+        for(let i = routerContext.matches.length - 1; i >= 0; i--){
+            const matchRoute = findRouteInTree(routes, routerContext.matches[i].route.id);
+            if (matchRoute && !matchRoute.isClientComponent) {
+                cssInjectionIndex = i;
+                break;
+            }
+        }
+        if (-1 === cssInjectionIndex) cssInjectionIndex = routerContext.matches.length - 1;
+    }
     return {
         type: 'render',
         actionData: routerContext.actionData,
@@ -71,45 +83,42 @@ const createServerPayload = (routerContext, routes)=>{
         loaderData: routerContext.loaderData,
         location: routerContext.location,
         routes: routerContext.matches.map((match, index, matches)=>{
-            const element = match.route.element;
+            const route = match.route;
+            const element = route.element;
             const parentMatch = index > 0 ? matches[index - 1] : void 0;
             let processedElement;
             if (element) {
                 const ElementComponent = element.type;
                 const elementProps = {
-                    loaderData: routerContext?.loaderData?.[match.route.id],
-                    actionData: routerContext?.actionData?.[match.route.id],
+                    loaderData: routerContext?.loaderData?.[route.id],
+                    actionData: routerContext?.actionData?.[route.id],
                     params: match.params,
-                    matches: routerContext.matches.map((m)=>{
-                        const { route, pathname, params } = m;
-                        return {
-                            id: route.id,
-                            pathname,
-                            params,
-                            data: routerContext?.loaderData?.[route.id],
-                            handle: route.handle
-                        };
-                    })
+                    matches: routerContext.matches.map((m)=>({
+                            id: m.route.id,
+                            pathname: m.pathname,
+                            params: m.params,
+                            data: routerContext?.loaderData?.[m.route.id],
+                            handle: m.route.handle
+                        }))
                 };
                 const routeElement = /*#__PURE__*/ external_react_default().createElement(ElementComponent, elementProps);
-                const isLeafRoute = index === routerContext.matches.length - 1;
-                processedElement = isLeafRoute && cssFiles.length > 0 ? /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, /*#__PURE__*/ external_react_default().createElement(external_CSSLinks_js_namespaceObject.CSSLinks, {
+                processedElement = index === cssInjectionIndex ? /*#__PURE__*/ external_react_default().createElement(external_react_default().Fragment, null, /*#__PURE__*/ external_react_default().createElement(external_CSSLinks_js_namespaceObject.CSSLinks, {
                     cssFiles
                 }), routeElement) : routeElement;
             }
             return {
                 element: processedElement,
-                errorElement: match.route.errorElement,
-                handle: match.route.handle,
-                hasAction: !!match.route.action,
-                hasErrorBoundary: !!match.route.hasErrorBoundary,
-                hasLoader: !!match.route.loader,
-                hasClientLoader: !!match.route.hasClientLoader,
-                id: match.route.id,
-                index: match.route.index,
+                errorElement: route.errorElement,
+                handle: route.handle,
+                hasAction: !!route.action,
+                hasErrorBoundary: !!route.hasErrorBoundary,
+                hasLoader: !!route.loader,
+                hasClientLoader: !!route.hasClientLoader,
+                id: route.id,
+                index: route.index,
                 params: match.params,
-                parentId: parentMatch?.route.id || match.route.parentId,
-                path: match.route.path,
+                parentId: parentMatch?.route.id || route.parentId,
+                path: route.path,
                 pathname: match.pathname,
                 pathnameBase: match.pathnameBase
             };
@@ -129,10 +138,11 @@ const handleRSCRedirect = (headers, basename, status)=>{
     });
 };
 const prepareRSCRoutes = async (routes)=>{
-    const isLazyComponent = (component)=>component && 'object' == typeof component && void 0 !== component._init && void 0 !== component._payload;
+    const isLazyComponent = (component)=>null != component && 'object' == typeof component && '_init' in component && '_payload' in component;
     const processRoutes = async (routesList)=>{
         await Promise.all(routesList.map(async (route)=>{
-            if ('lazyImport' in route && isLazyComponent(route.component)) route.component = (await route.lazyImport()).default;
+            const modernRoute = route;
+            if ('lazyImport' in modernRoute && isLazyComponent(modernRoute.component)) modernRoute.component = (await modernRoute.lazyImport()).default;
             if (route.children && Array.isArray(route.children)) await processRoutes(route.children);
         }));
     };
@@ -149,12 +159,14 @@ const mergeRoutes = (routes, originalRoutes)=>{
     };
     buildRoutesMap(routes);
     const mergeRoutesRecursive = (origRoutes)=>origRoutes.map((origRoute)=>{
-            if (origRoute.id && routesMap.has(origRoute.id)) {
-                const matchedRoute = routesMap.get(origRoute.id);
+            const modernOrig = origRoute;
+            if (modernOrig.id && routesMap.has(modernOrig.id)) {
+                const matchedRoute = routesMap.get(modernOrig.id);
                 const result = {
-                    loader: origRoute.hasClientLoader ? origRoute.loader : void 0,
+                    loader: modernOrig.hasClientLoader ? modernOrig.loader : void 0,
                     ...matchedRoute
                 };
+                if (modernOrig.isClientComponent) result.isClientComponent = true;
                 if (origRoute.children && Array.isArray(origRoute.children)) result.children = mergeRoutesRecursive(origRoute.children);
                 return result;
             }
@@ -172,6 +184,68 @@ const findRouteInTree = (routes, routeId)=>{
     }
     return null;
 };
+function getChangedMatches(matches, currentMatches) {
+    const currentById = new Map();
+    for (const m of currentMatches)if (m.route?.id) currentById.set(m.route.id, m);
+    return matches.filter((match)=>{
+        const current = currentById.get(match.route?.id);
+        return !current || JSON.stringify(current.params) !== JSON.stringify(match.params);
+    });
+}
+function canSkipRscFetch(matches, routerState) {
+    const changedMatches = getChangedMatches(matches, routerState?.matches || []);
+    return changedMatches.length > 0 && changedMatches.every((m)=>{
+        const route = m.route;
+        return route.isClientComponent && !(route.hasLoader && !route.hasClientLoader);
+    });
+}
+function injectRouteCss(routeId) {
+    if ("u" < typeof window) return;
+    const cssAssets = window._MODERNJS_ROUTE_MANIFEST?.routeAssets?.[routeId]?.referenceCssAssets;
+    if (!cssAssets) return;
+    const publicPath = window.__webpack_public_path__ || '/';
+    for (const css of cssAssets){
+        const href = css.startsWith('http') || css.startsWith('/') ? css : publicPath + css;
+        if (!document.querySelector(`link[href="${CSS.escape(href)}"]`)) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            document.head.appendChild(link);
+        }
+    }
+}
+function ensureClientComponent(route, originalRoutes) {
+    if (route.isClientComponent && !route.Component) {
+        const origRoute = findRouteInTree(originalRoutes, route.id);
+        if (origRoute?.Component) {
+            route.Component = origRoute.Component;
+            delete route.element;
+        }
+    }
+}
+function resolveClientLoaders(matches, originalRoutes) {
+    const clientMatches = matches.filter((m)=>m.route.hasClientLoader);
+    if (0 === clientMatches.length) return Promise.resolve([]);
+    return Promise.all(clientMatches.map(async (clientMatch)=>{
+        const origRoute = findRouteInTree(originalRoutes, clientMatch.route.id);
+        clientMatch.route.loader = origRoute?.loader;
+        const result = await clientMatch.resolve();
+        return {
+            routeId: clientMatch.route.id,
+            result
+        };
+    }));
+}
+function applyLoaderResults(results, loaderResults) {
+    for (const { routeId, result } of loaderResults)results[routeId] = result;
+}
+async function resolveClientOnlyNavigation(matches, results, originalRoutes, routerState) {
+    const changedMatches = getChangedMatches(matches, routerState?.matches || []);
+    for (const match of changedMatches)ensureClientComponent(match.route, originalRoutes);
+    applyLoaderResults(results, await resolveClientLoaders(changedMatches, originalRoutes));
+    for (const match of changedMatches)if (match.route.id) injectRouteCss(match.route.id);
+    return results;
+}
 const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>{
     const processedRoutes = payload.routes.reduceRight((previous, route)=>{
         if (previous.length > 0) return [
@@ -188,42 +262,28 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
     const router = (0, router_namespaceObject.createBrowserRouter)(mergedRoutes, {
         hydrationData: payload,
         basename: basename,
-        dataStrategy: async (context)=>{
-            const { request, matches } = context;
+        dataStrategy: async ({ request, matches })=>{
             const results = {};
-            const clientMatches = matches.filter((match)=>match.route.hasClientLoader);
+            if (canSkipRscFetch(matches, router.state)) return resolveClientOnlyNavigation(matches, results, originalRoutes, router.state);
             const fetchPromise = fetch(request.url, {
                 headers: {
                     'x-rsc-tree': 'true'
                 }
             });
-            const clientLoadersPromise = clientMatches.length > 0 ? Promise.all(clientMatches.map(async (clientMatch)=>{
-                const foundRoute = findRouteInTree(originalRoutes, clientMatch.route.id);
-                clientMatch.route.loader = foundRoute?.loader;
-                const res = await clientMatch.resolve();
-                return {
-                    routeId: clientMatch.route.id,
-                    result: res
-                };
-            })) : Promise.resolve([]);
+            const clientLoadersPromise = resolveClientLoaders(matches, originalRoutes);
             const res = await fetchPromise;
             const redirectLocation = res.headers.get('X-Modernjs-Redirect');
             if (redirectLocation) {
                 matches.forEach((match)=>{
                     const routeId = match.route.id;
                     if (routeId) results[routeId] = {
-                        type: 'redirect',
+                        type: 'data',
                         result: (0, router_namespaceObject.redirect)(redirectLocation)
                     };
                 });
                 return results;
             }
-            const [clientLoaderResults] = await Promise.all([
-                clientLoadersPromise
-            ]);
-            clientLoaderResults.forEach(({ routeId, result })=>{
-                results[routeId] = result;
-            });
+            applyLoaderResults(results, await clientLoadersPromise);
             if (!res.body) throw new Error('Response body is null');
             const payload = await (0, client_namespaceObject.createFromReadableStream)(res.body);
             if ('object' != typeof payload || null === payload || void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
@@ -231,10 +291,14 @@ const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>
             matches.forEach((match)=>{
                 const routeId = match.route.id;
                 const matchedRoute = serverPayload.routes.find((route)=>route.id === routeId);
-                if (matchedRoute) router.patchRoutes(matchedRoute.parentId, [
-                    matchedRoute
-                ], true);
-                if (serverPayload.loaderData?.[routeId]) results[routeId] = {
+                if (matchedRoute) {
+                    const modernMatch = match.route;
+                    router.patchRoutes(matchedRoute.parentId ?? null, [
+                        matchedRoute
+                    ], true);
+                    if (modernMatch.isClientComponent && modernMatch.Component) delete modernMatch.Component;
+                }
+                if (serverPayload.loaderData && routeId in serverPayload.loaderData) results[routeId] = {
                     type: 'data',
                     result: serverPayload.loaderData[routeId]
                 };

package/dist/cjs/router/runtime/utils.js

@@ -114,7 +114,12 @@ function getRouteObjects(routes, { globalApp, ssrMode, props }) {
                 ...'object' == typeof route.config ? route.config?.handle : {}
             },
             index: route.index,
+            hasLoader: !!route.loader,
             hasClientLoader: !!route.clientData,
+            hasAction: !!route.action,
+            ...route.isClientComponent ? {
+                isClientComponent: true
+            } : {},
             Component: route.component ? route.component : void 0,
             errorElement: route.error ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(route.error, {}) : void 0,
             children: route.children ? route.children.map((child)=>getRouteObjects([

package/dist/esm/core/browser/index.mjs

@@ -1,3 +1,4 @@
+import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
 import cookie from "cookie";
 import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
 import { getInitialContext } from "../context/runtime.mjs";
@@ -86,7 +87,9 @@ async function renderWithReact17(App, rootElement) {
 }
 async function hydrateWithReact18(App, rootElement) {
     const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.hydrateRoot(rootElement, App);
+    const root = ReactDOM.hydrateRoot(rootElement, App, {
+        identifierPrefix: SSR_HYDRATION_ID_PREFIX
+    });
     return root;
 }
 async function hydrateWithReact17(App, rootElement, callback) {

package/dist/esm/core/server/stream/createReadableStream.mjs

@@ -1,5 +1,6 @@
 import { PassThrough, Readable, Transform } from "stream";
 import { storage } from "@modern-js/runtime-utils/node";
+import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
 import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common.mjs";
 import { RenderLevel } from "../../constants.mjs";
 import { getGlobalInternalRuntimeContext } from "../../context/index.mjs";
@@ -37,6 +38,7 @@ const createReadableStreamFromElement = async (request, rootElement, options)=>{
     return new Promise((resolve)=>{
         const { pipe: reactStreamingPipe } = renderToPipeableStream(processedRootElement, {
             nonce: config.nonce,
+            identifierPrefix: SSR_HYDRATION_ID_PREFIX,
             [onReady] () {
                 let styledComponentsStyleTags = '';
                 extenders.forEach((extender)=>{

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

@@ -1,4 +1,5 @@
 import { time } from "@modern-js/runtime-utils/time";
+import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
 import server from "react-dom/server";
 import react_helmet from "react-helmet";
 import { RenderLevel } from "../../constants.mjs";
@@ -65,7 +66,9 @@ async function generateHtml(App, htmlTemplate, chunkSet, collectors, htmlModifie
     const finalApp = collectors.reduce((pre, creator)=>creator.collect?.(pre) || pre, App);
     try {
         const end = time();
-        html = server.renderToString(finalApp);
+        html = server.renderToString(finalApp, {
+            identifierPrefix: SSR_HYDRATION_ID_PREFIX
+        });
         chunkSet.renderLevel = RenderLevel.SERVER_RENDER;
         helmetData = react_helmet.renderStatic();
         const cost = end();

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

@@ -6,7 +6,7 @@ import { resolveSSRMode } from "../../../cli/ssr/mode.mjs";
 import { FILE_SYSTEM_ROUTES_FILE_NAME } from "../constants.mjs";
 import { walk } from "./nestedRoutes.mjs";
 import { fileSystemRoutes, routesForServer, ssrLoaderCombinedModule } from "./templates.mjs";
-import { getServerCombinedModueFile, getServerLoadersFile } from "./utils.mjs";
+import { getServerCombinedModuleFile, getServerLoadersFile } from "./utils.mjs";
 async function generateRoutesForEntry(entrypoint, appContext) {
     const routes = [];
     if (entrypoint.nestedRoutesEntry) {
@@ -89,7 +89,9 @@ const generateCode = async (appContext, config, entrypoints, api)=>{
                         entryName: entrypoint.entryName,
                         internalDirectory,
                         splitRouteChunks: config?.output?.splitRouteChunks,
-                        isRscClient: isUseRsc(config)
+                        isRscClientBundle: isUseRsc(config),
+                        srcDirectory,
+                        internalSrcAlias: appContext.internalSrcAlias
                     })
                 });
                 if (entrypoint.nestedRoutesEntry && (isUseSSRBundle(config) || isUseRsc(config))) {
@@ -109,13 +111,15 @@ const generateCode = async (appContext, config, entrypoints, api)=>{
                         entryName: entrypoint.entryName,
                         internalDirectory,
                         splitRouteChunks: config?.output?.splitRouteChunks,
-                        isRscClient: false
+                        isRscClientBundle: false,
+                        srcDirectory,
+                        internalSrcAlias: appContext.internalSrcAlias
                     });
                     await fs.outputFile(path.resolve(internalDirectory, `./${entryName}/routes.server.js`), serverRoutesCode, 'utf8');
                 }
                 const serverLoaderCombined = ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext);
                 if (serverLoaderCombined) {
-                    const serverLoaderFile = getServerCombinedModueFile(internalDirectory, entryName);
+                    const serverLoaderFile = getServerCombinedModuleFile(internalDirectory, entryName);
                     await fs.outputFile(serverLoaderFile, serverLoaderCombined);
                 }
                 await fs.outputFile(path.resolve(internalDirectory, `./${entryName}/${FILE_SYSTEM_ROUTES_FILE_NAME}`), code, 'utf8');