feat: support ssr

.gitignore

@@ -13,6 +13,7 @@ package-lock.json
 /packages/**/.docz
 /packages/*/lib
 /packages/*/dist
+/packages/af-webpack/test/bundlestats.json
 
 dist
 coverage

docs/.vuepress/config.js

@@ -151,7 +151,7 @@ module.exports = {
             {
               title: '官方插件',
               collapsable: false,
-              children: ['umi-plugin-react'],
+              children: ['umi-plugin-react', 'umi-plugin-prerender'],
             },
             {
               title: '插件开发',

docs/config/README.md

@@ -8,8 +8,8 @@ sidebarDepth: 2
 
 ### plugins
 
-* Type: `Array`
-* Default: `[]`
+- Type: `Array`
+- Default: `[]`
 
 Specify the plugins.
 
@@ -34,19 +34,22 @@ If the plugin has parameters, it is configured as an array. The first item is th
 export default {
   plugins: [
     // 有参数
-    ['umi-plugin-react', {
-      dva: true,
-      antd: true,
-    }],
+    [
+      'umi-plugin-react',
+      {
+        dva: true,
+        antd: true,
+      },
+    ],
     './plugin',
   ],
 };
 ```
 
 ### routes
 
-* Type: `Array`
-* Default: `null`
+- Type: `Array`
+- Default: `null`
 
 Configure routing.
 
@@ -74,8 +77,8 @@ Notice:
 
 ### disableRedirectHoist
 
-* Type:`Boolean`
-* Default: `false`
+- Type:`Boolean`
+- Default: `false`
 
 For some reason, we hoist all redirect when parsing the route config, but this caused some problems, so add this configuration to disable redirect hoist.
 
@@ -87,8 +90,8 @@ export default {
 
 ### history
 
-* Type: `String | [String, Object]`
-* Default: `browser`
+- Type: `String | [String, Object]`
+- Default: `browser`
 
 Specify the history type, including `browser`, `hash` and `memory`.
 
@@ -102,65 +105,65 @@ export default {
 
 ### outputPath
 
-* Type: `String`
-* Default: `./dist`
+- Type: `String`
+- Default: `./dist`
 
 Specifies the output path.
 
 ### base
 
-* Type: `String`
-* Default: `/`
+- Type: `String`
+- Default: `/`
 
 Specify the base of the react-router to be configured when deploying to a non-root directory.
 
 ### publicPath
 
-* Type: `String`
-* Default: `/`
+- Type: `String`
+- Default: `/`
 
 Specifies the publicPath of the webpack, pointing to the path where the static resource file is located.
 
 ### runtimePublicPath
 
-* Type: `Boolean`
-* Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
 Use the `window.publicPath` specified in the HTML when the value is `true`.
 
 ### cssPublicPath <Badge text="2.2.5+"/>
 
-* Type: `String`
-* Default: same as `publicPath`
+- Type: `String`
+- Default: same as `publicPath`
 
 Specify an extra publicPath for CSS.
 
 ### mountElementId
 
-* Type: `String`
-* Default: `root`
+- Type: `String`
+- Default: `root`
 
 Specifies the mount point id which the react app will mount to.
 
 ### minimizer
 
-* Type: `String`
-* Default: `uglifyjs`
-* Options: `uglifyjs|terserjs`
+- Type: `String`
+- Default: `uglifyjs`
+- Options: `uglifyjs|terserjs`
 
 Which minimizer to use. UglifyJS does not support es6 while [terser](https://github.com/terser-js/terser) does.
 
 ### hash
 
-* Type: `Boolean`
-* Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
 Whether to enable the hash file suffix.
 
 ### targets <Badge text="2.1.0+"/>
 
-* Type: `Object`
-* Default: `{ chrome: 49, firefox: 45, safari: 10, edge: 13, ios: 10 }`
+- Type: `Object`
+- Default: `{ chrome: 49, firefox: 45, safari: 10, edge: 13, ios: 10 }`
 
 Configuring the minimum version of browsers you want to compatible with, umi will automatically introduce polyfill and transform grammar. Configuration items will be merged to default values, so there is no need to give any duplicate configuration.
 
@@ -176,15 +179,15 @@ export default {
 
 ### context
 
-* Type: `Object`
-* Default: `{}`
+- Type: `Object`
+- Default: `{}`
 
 Configuring a global context will override the context in each page.
 
 ### exportStatic
 
-* Type: `Boolean | Object`
-* Default: `false`
+- Type: `Boolean | Object`
+- Default: `false`
 
 If set to `true` or `Object`, all routes are exported as static pages, otherwise only one index.html is output by default.
 
@@ -196,28 +199,28 @@ such as:
 
 ### exportStatic.htmlSuffix
 
-* Type: `Boolean`
-* Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
 Enable the `.html` suffix.
 
 ### exportStatic.dynamicRoot
 
-* Type: `Boolean`
-* Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
 Deploy to any path.
 
 ### singular
 
-* Type: `Boolean`
-* Default: `false`
+- Type: `Boolean`
+- Default: `false`
 
 If set to `true`, enable the directory for singular mode.
 
-* src/layout/index.js
-* src/page
-* model (if umi-plugin-dva plugin is enabled)
+- src/layout/index.js
+- src/page
+- model (if umi-plugin-dva plugin is enabled)
 
 ### mock.exclude <Badge text="2.4.5+"/>
 
@@ -231,12 +234,9 @@ e.g. exclue all files and directorys starts with `_`,
 ```js
 export default {
   mock: {
-    exclude: [
-      'mock/**/_*.js',
-      'mock/_*/**/*.js',
-    ],
-  }
-}
+    exclude: ['mock/**/_*.js', 'mock/_*/**/*.js'],
+  },
+};
 ```
 
 ### block <Badge text="2.7.0+"/>
@@ -247,12 +247,46 @@ export default {
 ```js
 export default {
   block: {
-    defaultGitUrl: "https://github.com/ant-design/pro-blocks",
-    npmClient: "cnpm",
-  }
+    defaultGitUrl: 'https://github.com/ant-design/pro-blocks',
+    npmClient: 'cnpm',
+  },
+};
+```
+
+### ssr <Badge text="beta" type="warn"/> <Badge text="2.8.0+"/>
+
+- Type: `Boolean | Object`
+- Default: `false`
+
+Configure whether to enable Server-Side Render, which is off by default.
+
+When enabled, `umi.server.js` file is also generated when the client static file is generated. Use the following in Node.js:
+
+```js
+// Return the rendered html fragment according to the ctx.req.url
+async function UmiServerRender(ctx) {
+  // mock a window object
+  global.window = {};
+  // require module
+  const serverRender = require('./dist/umi.server');
+  // export react-dom/server to avoid React hooks ssr error
+  const { ReactDOMServer } = serverRender;
+
+  const {
+    // Current root container element
+    rootContainer,
+    // Document html Element = rootContainer + template Element
+    htmlElement,
+  } = await serverRender.default(ctx);
+
+  // Render the element into html
+  const ssrHtml = ReactDOMServer.renderToString(htmlElement);
+  return ssrHtml;
 }
 ```
 
+[using Pre-Rendering](/plugin/umi-plugin-prerender.html), [umi-example-ssr-with-egg](https://github.com/umijs/umi-example-ssr-with-egg)
+
 ## webpack
 
 ### chainWebpack
@@ -270,10 +304,10 @@ chainWebpack(config, { webpack }) {
   config.plugins.delete('progress');
 }
 ```
+
 ### theme
 
-The configuration theme is actually equipped with the less variable. Support for both object and string types, the string needs to point to a file that returns the configuration.
-such as:
+The configuration theme is actually equipped with the less variable. Support for both object and string types, the string needs to point to a file that returns the configuration. such as:
 
 ```
 "theme": {
@@ -306,8 +340,7 @@ For example, after [ant-design-pro opens tree-shaking](https://github.com/ant-de
 
 ### define
 
-Passed to the code via the webpack's DefinePlugin , the value is automatically handled by `JSON.stringify`.
-such as:
+Passed to the code via the webpack's DefinePlugin , the value is automatically handled by `JSON.stringify`. such as:
 
 ```js
 "define": {
@@ -318,8 +351,7 @@ such as:
 
 ### externals
 
-Configure the [externals](https://webpack.js.org/configuration/externals/) property of webpack.
-such as:
+Configure the [externals](https://webpack.js.org/configuration/externals/) property of webpack. such as:
 
 ```js
 // Configure react and react-dom do not enter the code
@@ -385,7 +417,7 @@ const config = {
       mediaQuery: false,
     }),
   ],
-}
+};
 ```
 
 ### cssModulesExcludes
@@ -409,8 +441,7 @@ such as:
 
 ### proxy
 
-Configure the [proxy](https://webpack.js.org/configuration/dev-server/#devserver-proxy) property of webpack-dev-server.
-If you want to proxy requests to other servers, you can do this:
+Configure the [proxy](https://webpack.js.org/configuration/dev-server/#devserver-proxy) property of webpack-dev-server. If you want to proxy requests to other servers, you can do this:
 
 ```markup
 "proxy": {
@@ -430,8 +461,7 @@ Configure options for [node-sass](https://github.com/sass/node-sass#options). No
 
 ### manifest
 
-After configuration, asset-manifest.json will be generated and the option will be passed to [https://www.npmjs.com/package/webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin).
-such as:
+After configuration, asset-manifest.json will be generated and the option will be passed to [https://www.npmjs.com/package/webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin). such as:
 
 ```markup
 "manifest": {
@@ -500,9 +530,6 @@ e.g.
 
 ```js
 export default {
-  browserslist: [
-    '> 1%',
-    'last 2 versions',
-  ],
+  browserslist: ['> 1%', 'last 2 versions'],
 };
 ```