feat: new ssr

examples/max/package.json

@@ -19,8 +19,8 @@
     "@umijs/max": "workspace:*",
     "antd": "^4.23.2",
     "dayjs": "^1.11.7",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

examples/mf-host/package.json

@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@umijs/max": "workspace:*",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

examples/mf-remote/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@umijs/max": "workspace:*",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

examples/qiankun-master/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@umijs/max": "workspace:*",
     "qiankun": "^2.10.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3"

examples/qiankun-slave-app2/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@umijs/max": "workspace:*",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   }
 }

examples/qiankun-slave/package.json

@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@umijs/max": "workspace:*",
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

examples/ssr-demo/.umirc.ts

@@ -1,10 +1,27 @@
 export default {
   svgr: {},
   hash: true,
+  mfsu: false,
   routePrefetch: {},
   manifest: {},
   clientLoader: {},
+  mako: {
+    plugins: [
+      {
+        load: () => {},
+      },
+    ],
+  },
   ssr: {
-    serverBuildPath: './umi.server.js',
+    builder: 'mako',
   },
+  exportStatic: {},
+  styles: [`body { color: red; }`],
+
+  metas: [
+    {
+      name: 'test',
+      content: 'content',
+    },
+  ],
 };

examples/ssr-demo/mako.config.json

@@ -0,0 +1,6 @@
+{
+  "optimization": {
+    "skipModules": true,
+    "concatenateModules": false
+  }
+}

examples/ssr-demo/package.json

@@ -9,6 +9,8 @@
     "start:prod": "node ./production-server.js"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.18.5",
+    "antd": "^5",
     "express": "4.18.2",
     "umi": "workspace:*"
   }

examples/ssr-demo/src/layouts/index.tsx

@@ -0,0 +1,23 @@
+import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import { useState } from 'react';
+import { Outlet, useServerInsertedHTML } from 'umi';
+
+export default function Layout() {
+  const [cssCache] = useState(() => createCache());
+
+  useServerInsertedHTML(() => {
+    const style = extractStyle(cssCache, { plain: true });
+    return (
+      <style
+        id="antd-cssinjs"
+        dangerouslySetInnerHTML={{ __html: style }}
+      ></style>
+    );
+  });
+
+  return (
+    <StyleProvider cache={cssCache}>
+      <Outlet />
+    </StyleProvider>
+  );
+}

examples/ssr-demo/src/pages/index.tsx

@@ -1,8 +1,12 @@
+import { Input } from 'antd';
+import { useId } from 'react';
 import {
+  ClientLoader,
   Link,
   MetadataLoader,
   ServerLoader,
   useClientLoaderData,
+  useLoaderData,
   useServerInsertedHTML,
   useServerLoaderData,
 } from 'umi';
@@ -20,18 +24,29 @@ import umiLogo from './umi.png';
 export default function HomePage() {
   const clientLoaderData = useClientLoaderData();
   const serverLoaderData = useServerLoaderData<typeof serverLoader>();
+  const loaderData = useLoaderData<typeof serverLoader>();
 
   useServerInsertedHTML(() => {
-    return <div>inserted html</div>;
+    return (
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `.server_inserted_style { color: #1677ff }`,
+        }}
+      ></style>
+    );
   });
 
+  const id = useId();
+
   return (
     <div>
       <h1 className="title">Hello~</h1>
+      <p className="server_inserted_style">id: {id}</p>
       <p className={styles.blue}>This is index.tsx</p>
       <p className={cssStyle.title}>I should be pink</p>
       <p className={cssStyle.blue}>I should be cyan</p>
       <Button />
+      <Input placeholder="这个样式不应该闪烁" />
       <img src={bigImage} alt="" />
       <img src={umiLogo} alt="umi" />
       <Link to="/users/user">/users/user</Link>
@@ -43,19 +58,21 @@ export default function HomePage() {
       </div>
       <p>client loader data: {JSON.stringify(clientLoaderData)}</p>
       <p>server loader data: {JSON.stringify(serverLoaderData)}</p>
+      <p>merge loader data: {JSON.stringify(loaderData)}</p>
     </div>
   );
 }
 
-export async function clientLoader() {
+export const clientLoader: ClientLoader = async ({}) => {
   await new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
-  return { message: 'data from client loader of index.tsx' };
-}
+  return { clientMessage: 'data from client loader of index.tsx' };
+};
+clientLoader.hydrate = true;
 
 export const serverLoader: ServerLoader = async (req) => {
-  const url = req!.request.url;
+  const url = req?.request?.url;
   await new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
-  return { message: `data from server loader of index.tsx, url: ${url}` };
+  return { serverMessage: `data from server loader of index.tsx, url: ${url}` };
 };
 
 // SEO-设置页面的TDK

package.json

@@ -66,8 +66,8 @@
     "@types/jest": "^29.2.5",
     "@types/node": "^18.11.18",
     "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/resolve": "^1.20.2",
     "@types/rimraf": "3.0.2",
     "@types/tunnel": "^0.0.3",
@@ -101,8 +101,8 @@
     "prettier-plugin-organize-imports": "^3.2.2",
     "prettier-plugin-packagejson": "^2.4.3",
     "qs": "^6.11.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-text-loop-next": "0.0.3",
     "regenerator-runtime": "^0.13.11",
     "resolve": "^1.22.0",
@@ -142,8 +142,8 @@
       ]
     },
     "overrides": {
-      "browserslist": "$browserslist",
-      "@parcel/watcher": "2.1.0"
+      "@parcel/watcher": "2.1.0",
+      "browserslist": "$browserslist"
     }
   },
   "_local": "This flag is used to check if the development in local, Please do not delete."

packages/bundler-webpack/src/config/definePlugin.test.ts

@@ -13,6 +13,7 @@ test('normal', () => {
       NODE_ENV: '"test"',
       PUBLIC_PATH: '"/"',
     },
+    'process.env.SSR_MANIFEST': 'process.env.SSR_MANIFEST',
   });
 });
 
@@ -31,6 +32,7 @@ test('env variables', () => {
       UMI_APP_FOO: '"BAR"',
       PUBLIC_PATH: '"/"',
     },
+    'process.env.SSR_MANIFEST': 'process.env.SSR_MANIFEST',
   });
 });
 

packages/bundler-webpack/src/config/definePlugin.ts

@@ -66,6 +66,7 @@ export function resolveDefine(opts: IOpts) {
 
   return {
     'process.env': env,
+    'process.env.SSR_MANIFEST': 'process.env.SSR_MANIFEST',
     ...define,
   };
 }

packages/mfsu/src/mfsu/strategyStaticAnalyze.ts

@@ -1,11 +1,11 @@
 import { logger, printHelp, winPath } from '@umijs/utils';
+import type { Configuration } from 'webpack';
 import { checkMatch } from '../babelPlugins/awaitImport/checkMatch';
 import mfImport from '../babelPlugins/awaitImport/MFImport';
 import { StaticDepInfo } from '../staticDepInfo/staticDepInfo';
+import { extractBabelPluginImportOptions } from '../utils/webpackUtils';
 import { IBuildDepPluginOpts } from '../webpackPlugins/buildDepPlugin';
 import type { IMFSUStrategy, MFSU } from './mfsu';
-import type { Configuration } from 'webpack';
-import { extractBabelPluginImportOptions } from '../utils/webpackUtils';
 
 export class StaticAnalyzeStrategy implements IMFSUStrategy {
   private readonly mfsu: MFSU;

packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx

@@ -77,6 +77,10 @@ function patchMicroAppRouteComponent(routes: any[]) {
 }
 
 export async function render(oldRender: typeof noop) {
+  // 在 ssr 的场景下，直接返回旧的 render
+  if (typeof window === 'undefined') {
+    return oldRender();
+  }
   const runtimeOptions = await getMasterRuntime();
   let masterOptions: MasterOptions = {
     ...getMasterOptions(),
@@ -138,6 +142,10 @@ export async function render(oldRender: typeof noop) {
 }
 
 export function patchClientRoutes({ routes }: { routes: any[] }) {
+  // 在 ssr 的场景下，不执行主应用的 patchClientRoutes
+  if (typeof window === 'undefined') {
+    return;
+  }
   const microAppRoutes = [].concat(
     deepFilterLeafRoutes(routes),
     deepFilterLeafRoutes(microAppRuntimeRoutes),

packages/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts

@@ -3,6 +3,10 @@ import { createHistory } from '@@/core/history';
 import qiankunRender, { contextOptsStack } from './lifecycles';
 
 export function render(oldRender: any) {
+  // 在 ssr 的场景下，直接返回旧的 render
+  if (typeof window === 'undefined') {
+    return oldRender();
+  }
   return qiankunRender().then(oldRender);
 }
 

packages/plugins/src/initial-state.ts

@@ -52,7 +52,7 @@ export default function InitialStateProvider(props: any) {
       appLoaded.current = true;
     }
   }, [loading]);
-  if (loading && !appLoaded.current) {
+  if (loading && !appLoaded.current && typeof window !== 'undefined') {
     return <Loading />;
   }
   return props.children;

packages/plugins/src/qiankun/master.ts

@@ -210,4 +210,18 @@ export { MicroAppWithMemoHistory } from './MicroAppWithMemoHistory';
       `,
     });
   });
+
+  api.chainWebpack((config, { ssr }) => {
+    // 在 ssr 的场景下，把 qiankun external 到一个任意模块
+    // 这样就不会把 qiankun 的依赖构建进产物中
+    if (ssr) {
+      const originalExternals = config.get('externals');
+      config.externals({
+        ...originalExternals,
+        qiankun: 'fs',
+      });
+    }
+
+    return config;
+  });
 };

packages/plugins/src/qiankun/slave.ts

@@ -180,7 +180,11 @@ export interface IRuntimeConfig {
         ];
   });
 
-  api.chainWebpack((config) => {
+  api.chainWebpack((config, { ssr }) => {
+    // ssr 场景下，通过 cjs 的方式来使用模块，跳过 umd方式的构建
+    if (ssr) {
+      return;
+    }
     assert(api.pkg.name, 'You should have name in package.json.');
     // 默认不修改 library chunk 的 name，从而确保可以通过 window[appName] 访问到导出
     // mfsu 关闭的时候才可以修改，否则可能导致配合 mfsu 时，子应用的 umd chunk 无法被正确加载
@@ -223,11 +227,14 @@ export interface IRuntimeConfig {
 
   api.addEntryCode(() => [
     `
-export const bootstrap = qiankun_genBootstrap(render);
-export const mount = qiankun_genMount('${api.config.mountElementId}');
-export const unmount = qiankun_genUnmount('${api.config.mountElementId}');
-export const update = qiankun_genUpdate();
-if (!window.__POWERED_BY_QIANKUN__) {
+const qiankun_noop = () => new Error('qiankun lifecycle is not available for server runtime!');
+const isServer = typeof window === 'undefined';
+export const bootstrap = isServer ? qiankun_noop: qiankun_genBootstrap(render);
+export const mount = isServer ? qiankun_noop : qiankun_genMount('${api.config.mountElementId}');
+export const unmount = isServer ? qiankun_noop : qiankun_genUnmount('${api.config.mountElementId}');
+export const update = isServer ? qiankun_noop : qiankun_genUpdate();
+// 增加 ssr 的判断
+if (!isServer && !window.__POWERED_BY_QIANKUN__) {
   bootstrap().then(mount);
 }
     `,