fix: ssr stream helmet bug and node runtime engines

docs/docs/ssr.md

@@ -614,6 +614,10 @@ export default () => {
 }
 ```
 
+### Helmet 结合 stream 渲染无法显示 title
+
+因为 react-helmet 暂不支持 stream 渲染，如果使用 Helmet ，请使用 `mode: 'string'` 方式渲染。[nfl/react-helmet#322](https://github.com/nfl/react-helmet/issues/322)
+
 ### antd pro 怎样使用服务端渲染？
 
 首先，[antd pro](https://github.com/ant-design/ant-design-pro/) 作为中后台项目,没有 SEO 需求，不适合做服务端渲染；

docs/docs/ssr.zh-CN.md

@@ -607,6 +607,10 @@ export default () => {
 }
 ```
 
+### Helmet 结合 stream 渲染无法显示 title
+
+因为 react-helmet 暂不支持 stream 渲染，如果使用 Helmet ，请使用 `mode: 'string'` 方式渲染。[nfl/react-helmet#322](https://github.com/nfl/react-helmet/issues/322)
+
 ### antd pro 怎样使用服务端渲染？
 
 首先，[antd pro](https://github.com/ant-design/ant-design-pro/) 作为中后台项目,没有 SEO 需求，不适合做服务端渲染；

examples/ssr-koa/package.json

@@ -17,6 +17,9 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "dependencies": {
     "@ant-design/pro-layout": "^5.0.12",
     "@umijs/preset-react": "^1.5.17",

examples/ssr-koa/server.js

@@ -42,12 +42,11 @@ app.use(async (ctx, next) => {
     if (!render) {
       render = require('./dist/umi.server');
     }
-    // 这里默认是流失渲染
+    // 这里默认是字符串渲染
     ctx.type = 'text/html';
     ctx.status = 200;
     const { html, error } = await render({
       path: ctx.request.url,
-      mode: 'stream',
     });
     if (error) {
       console.log('----------------服务端报错-------------------', error);

examples/ssr-koa/src/pages/index.js

@@ -1,39 +1,43 @@
 import React from 'react';
-import { connect, useIntl, getLocale, setLocale } from 'umi';
+import { connect, useIntl, getLocale, setLocale, Helmet } from 'umi';
 import { Button } from 'antd';
 
 const Home = (props) => {
   const { title } = props;
   console.log('renderd', title);
   const changeLangs = () => {
-
-    const lang = getLocale()
+    const lang = getLocale();
     console.log('changeLangs', lang);
-    const change = lang === 'zh-CN' ? 'en-US' : 'zh-CN'
+    const change = lang === 'zh-CN' ? 'en-US' : 'zh-CN';
     //     // 刷新页面
     // setLocale('zh-TW', true);
     // // 不刷新页面
     setLocale(change, false);
-  }
+  };
   const intl = useIntl();
   return (
     <div>
       <h1>{title}</h1>
-      <h2>{intl.formatMessage(
-        {
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+      <h2>
+        {intl.formatMessage({
           id: 'umi',
-        }
-      )}</h2>
+        })}
+      </h2>
       <Button onClick={changeLangs}>切换语言</Button>
     </div>
-  )
-}
-Home.getInitialProps = (async ({ store, isServer, history, match, route }) => {
+  );
+};
+Home.getInitialProps = async ({ store, isServer, history, match, route }) => {
   // console.log(ctx);
-  if (!isServer) { return }
-  await store.dispatch({ type: 'test/test' })
-  const { test } = store.getState()
-  return { test }
-})
+  if (!isServer) {
+    return;
+  }
+  await store.dispatch({ type: 'test/test' });
+  const { test } = store.getState();
+  return { test };
+};
 
-export default connect((({ test }) => ({ title: test.title })))(Home)
+export default connect(({ test }) => ({ title: test.title }))(Home);

examples/ssr-normal/package.json

@@ -5,6 +5,9 @@
     "dev": "umi dev",
     "build": "umi build"
   },
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "private": true,
   "peerDependencies": {
     "umi": "latest"

examples/ssr-with-eggjs/app/controller/home.js

@@ -29,7 +29,6 @@ class HomeController extends Controller {
     // 将 html 模板传到服务端渲染函数中
     const { error, html } = await this.serverRender({
       path: ctx.url,
-      mode: 'stream',
       getInitialPropsCtx: {},
       htmlTemplate,
     });

examples/ssr-with-eggjs/package.json

@@ -15,6 +15,9 @@
     "ci": "npm run lint && npm run cov",
     "autod": "autod"
   },
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "dependencies": {
     "@umijs/preset-react": "^1.5.17",
     "cross-env": "^5.2.0",

packages/preset-built-in/src/index.test.ts

@@ -290,10 +290,10 @@ test('ssr using stream', (done) => {
       }).then(({ html, rootContainer }) => {
         expect(rootContainer instanceof Stream).toBeTruthy();
         expect(html instanceof Stream).toBeTruthy();
-        const expectBytes = new Buffer(
+        const expectBytes = Buffer.from(
           '<div><ul><li>hello</li><li>world</li></ul></div>',
         );
-        let bytes = new Buffer('');
+        let bytes = Buffer.from('');
         rootContainer.on('data', (chunk) => {
           bytes = Buffer.concat([bytes, chunk]);
         });

packages/preset-built-in/src/plugins/features/ssr/ssr.ts

@@ -266,6 +266,7 @@ export default (api: IApi) => {
 
       config.output
         .filename(OUTPUT_SERVER_FILENAME)
+        // avoid using `require().default`, just using `require()`
         .libraryExport('default')
         .chunkFilename('[name].server.js')
         .libraryTarget('commonjs2');

packages/preset-built-in/src/plugins/features/ssr/templates/renderServer/renderServer.test.tsx

@@ -314,8 +314,8 @@ test('renderServer stream', (done) => {
       { path: '/bar', component: () => <h1>bar</h1> },
     ],
   }).then(({ pageHTML }) => {
-    const expectBytes = new Buffer('<div data-reactroot=""><h1>foo</h1></div>');
-    let bytes = new Buffer('');
+    const expectBytes = Buffer.from('<div data-reactroot=""><h1>foo</h1></div>');
+    let bytes = Buffer.from('');
     expect(pageHTML instanceof Stream).toBeTruthy();
     pageHTML.on('data', (chunk) => {
       bytes = Buffer.concat([bytes, chunk]);

packages/preset-built-in/src/plugins/features/ssr/templates/utils.test.tsx

@@ -59,7 +59,7 @@ test('handleHTML stream', (done) => {
   }).then(html => {
     expect(html instanceof Stream).toBeTruthy();
     expect(html instanceof Stream).toBeTruthy();
-    let bytes = new Buffer('');
+    let bytes = Buffer.from('');
     html.on('data', (chunk) => {
       bytes = Buffer.concat([bytes, chunk]);
     });
@@ -141,7 +141,7 @@ test('handleHTML dynamicImport', async () => {
 
 test('ReadableString', (done) => {
   const wrapperStream = new ReadableString('<div></div>');
-  let bytes = new Buffer('');
+  let bytes = Buffer.from('');
     wrapperStream.on('data', (chunk) => {
       bytes = Buffer.concat([bytes, chunk]);
     });