feat: add ssr.prerender configuration for umi build prerender (umijs#…

…7269) * feat: 增加 ssr.prerender 配置控制是否开启构建预渲染逻辑 * feat: add type and test * test: fix ssr prod build load react-router error Co-authored-by: sky <[email protected]>
soolx · Sep 8, 2021 · d1ac759 · d1ac759
1 parent badc5c7
commit d1ac759
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 1 deletion.
diff --git a/docs/config/README.md b/docs/config/README.md
@@ -1118,6 +1118,7 @@ __webpack_public_path__ = window.resourceBaseUrl || window.publicPath;
     // devServerRender: true,
     // mode: 'string',
     // staticMarkup: false,
+    // prerender: true
   }
 }
 ```
@@ -1129,6 +1130,7 @@ __webpack_public_path__ = window.resourceBaseUrl || window.publicPath;
 - `devServerRender`：在 `umi dev` 开发模式下，执行渲染，用于 umi SSR 项目的快速开发、调试，服务端渲染效果所见即所得，同时我们考虑到可能会与服务端框架（如 [Egg.js](https://eggjs.org/)、[Express](https://expressjs.com/)、[Koa](https://koajs.com/)）结合做本地开发、调试，关闭后，在 `umi dev` 下不执行服务端渲染，但会生成 `umi.server.js`（Umi SSR 服务端渲染入口文件），渲染开发流程交由开发者处理。
 - `mode`：渲染模式，默认使用 `string` 字符串渲染，同时支持流式渲染 `mode: 'stream'`，减少 TTFB（浏览器开始收到服务器响应数据的时间） 时长。
 - `staticMarkup`：html 上的渲染属性（例如 React 渲染的 `data-reactroot`），常用于静态站点生成的场景上。
+- `prerender`: SSR umi build 时是否开启 SSR HTML 预渲染，默认为 true。
 
 注意：
 

diff --git a/docs/config/README.zh-CN.md b/docs/config/README.zh-CN.md
@@ -1117,6 +1117,7 @@ __webpack_public_path__ = window.resourceBaseUrl || window.publicPath;
     // devServerRender: true,
     // mode: 'string',
     // staticMarkup: false,
+    // prerender: true
   }
 }
 ```
@@ -1128,6 +1129,7 @@ __webpack_public_path__ = window.resourceBaseUrl || window.publicPath;
 - `devServerRender`：在 `umi dev` 开发模式下，执行渲染，用于 umi SSR 项目的快速开发、调试，服务端渲染效果所见即所得，同时我们考虑到可能会与服务端框架（如 [Egg.js](https://eggjs.org/)、[Express](https://expressjs.com/)、[Koa](https://koajs.com/)）结合做本地开发、调试，关闭后，在 `umi dev` 下不执行服务端渲染，但会生成 `umi.server.js`（Umi SSR 服务端渲染入口文件），渲染开发流程交由开发者处理。
 - `mode`：渲染模式，默认使用 `string` 字符串渲染，同时支持流式渲染 `mode: 'stream'`，减少 TTFB（浏览器开始收到服务器响应数据的时间） 时长。
 - `staticMarkup`：html 上的渲染属性（例如 React 渲染的 `data-reactroot`），常用于静态站点生成的场景上。
+- `prerender`: umi build 时是否开启 SSR HTML 预渲染，默认为 true。
 
 注意：
 

diff --git a/packages/preset-built-in/src/fixtures/ssr-prerender-no/.umirc.ts b/packages/preset-built-in/src/fixtures/ssr-prerender-no/.umirc.ts
@@ -0,0 +1,10 @@
+import { IConfig } from '@umijs/types';
+
+export default {
+  ssr: {
+    prerender: false,
+    removeWindowInitialProps: false
+  },
+  exportStatic: {},
+  routes: [{ path: '/', component: 'index' }],
+} as IConfig;
diff --git a/packages/preset-built-in/src/fixtures/ssr-prerender-no/pages/index.tsx b/packages/preset-built-in/src/fixtures/ssr-prerender-no/pages/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Home = (props: any) => {
+
+  return <div><h2>{props.message}</h2></div>;
+};
+
+Home.getInitialProps = async () => {
+  return { message: 'prerender' }
+};
+
+export default Home;
diff --git a/packages/preset-built-in/src/fixtures/ssr-prerender/.umirc.ts b/packages/preset-built-in/src/fixtures/ssr-prerender/.umirc.ts
@@ -0,0 +1,10 @@
+import { IConfig } from '@umijs/types';
+
+export default {
+  ssr: {},
+  exportStatic: {},
+  routes: [{ path: '/', component: 'index' }],
+  alias: {
+    'react-router': require.resolve('react-router/cjs/react-router.js'),
+  },
+} as IConfig;
diff --git a/packages/preset-built-in/src/fixtures/ssr-prerender/pages/index.tsx b/packages/preset-built-in/src/fixtures/ssr-prerender/pages/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Home = (props: any) => {
+  return <div><h2>{props.message}</h2></div>;
+};
+
+Home.getInitialProps = async () => {
+  return { message: 'prerender' }
+};
+
+export default Home;
+
diff --git a/packages/preset-built-in/src/index.test.ts b/packages/preset-built-in/src/index.test.ts
@@ -433,3 +433,37 @@ test('exportStatic', async () => {
     expect(existsSync(join(cwd, 'dist', 'list', ':id.html'))).toBeTruthy();
   }
 });
+
+test('ssr prerender', async () => {
+  const cwd = join(fixtures, 'ssr-prerender');
+  const service = new Service({
+    cwd,
+    env: 'production',
+    presets: [require.resolve('../lib/index.js')],
+  });
+  await service.run({
+    name: 'build',
+    args: {},
+  });
+  expect(existsSync(join(cwd, 'dist', 'index.html'))).toBeTruthy();
+  const html = readFileSync(join(cwd, 'dist', 'index.html'), 'utf8');
+  expect(
+    html.includes('<div id="root"><div><h2>prerender</h2></div></div>'),
+  ).toBeTruthy();
+});
+
+test('ssr prerender false', async () => {
+  const cwd = join(fixtures, 'ssr-prerender-no');
+  const service = new Service({
+    cwd,
+    env: 'production',
+    presets: [require.resolve('../lib/index.js')],
+  });
+  await service.run({
+    name: 'build',
+    args: {},
+  });
+  expect(existsSync(join(cwd, 'dist', 'index.html'))).toBeTruthy();
+  const html = readFileSync(join(cwd, 'dist', 'index.html'), 'utf8');
+  expect(html.includes('<div id="root"></div>')).toBeTruthy();
+});
diff --git a/packages/preset-built-in/src/plugins/features/exportStatic.ts b/packages/preset-built-in/src/plugins/features/exportStatic.ts
@@ -96,7 +96,8 @@ export default (api: IApi) => {
     );
     const { ssr } = api.config;
     if (
-      ssr &&
+      ssr && 
+      ssr.prerender !== false &&
       api.env === 'production' &&
       existsSync(serverFilePath) &&
       !isDynamicRoute(route.path!)

diff --git a/packages/preset-built-in/src/plugins/features/ssr/ssr.ts b/packages/preset-built-in/src/plugins/features/ssr/ssr.ts
@@ -134,6 +134,11 @@ export default (api: IApi) => {
             staticMarkup: joi
               .boolean()
               .description('static markup in static site'),
+            prerender: joi
+              .boolean()
+              .description(
+                'whether to enable pre-rendering when umi build export static mode',
+              ),
           })
           .without('forceInitial', ['removeWindowInitialProps'])
           .error(

diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
@@ -307,6 +307,7 @@ export interface ISSR {
   devServerRender?: boolean;
   mode?: 'string' | 'stream';
   staticMarkup?: boolean;
+  prerender?: boolean;
 }
 
 export interface ICopy {