@umijs/renderer-react 4.3.31 → 4.3.33

package/dist/browser.d.ts

@@ -69,6 +69,10 @@ export declare type RenderClientOpts = {
      * ssr 的配置
      */
     hydrate?: boolean;
+    /**
+     * ssr 是否启用流式渲染, 默认 true, 对 SEO 存在一定的负优化
+     */
+    useStream?: boolean;
     /**
      * 直接返回组件，是为了方便测试
      */

package/dist/browser.js

@@ -90,7 +90,8 @@ var getBrowser = function getBrowser(opts, routesElement) {
     routesById: opts.routes,
     routeComponents: opts.routeComponents,
     loadingComponent: opts.loadingComponent,
-    reactRouter5Compat: opts.reactRouter5Compat
+    reactRouter5Compat: opts.reactRouter5Compat,
+    useStream: opts.useStream
   });
   opts.pluginManager.applyPlugins({
     key: 'patchClientRoutes',

package/dist/routes.d.ts

@@ -6,4 +6,5 @@ export declare function createClientRoutes(opts: {
     parentId?: string;
     loadingComponent?: React.ReactNode;
     reactRouter5Compat?: boolean;
+    useStream?: boolean;
 }): IClientRoute[];

package/dist/routes.js

@@ -10,11 +10,13 @@ import { RouteContext, useRouteData } from "./routeContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
     parentId = opts.parentId,
-    routeComponents = opts.routeComponents;
+    routeComponents = opts.routeComponents,
+    _opts$useStream = opts.useStream,
+    useStream = _opts$useStream === void 0 ? true : _opts$useStream;
   return Object.keys(routesById).filter(function (id) {
     return routesById[id].parentId === parentId;
   }).map(function (id) {
-    var route = createClientRoute(_objectSpread({
+    var route = createClientRoute(_objectSpread(_objectSpread({
       route: routesById[id],
       routeComponent: routeComponents[id],
       loadingComponent: opts.loadingComponent,
@@ -24,13 +26,16 @@ export function createClientRoutes(opts) {
       hasChildren: Object.keys(routesById).filter(function (rid) {
         return routesById[rid].parentId === id;
       }).length > 0
+    }), {}, {
+      useStream: useStream
     }));
     var children = createClientRoutes({
       routesById: routesById,
       routeComponents: routeComponents,
       parentId: route.id,
       loadingComponent: opts.loadingComponent,
-      reactRouter5Compat: opts.reactRouter5Compat
+      reactRouter5Compat: opts.reactRouter5Compat,
+      useStream: useStream
     });
     if (children.length > 0) {
       route.children = children;
@@ -58,7 +63,9 @@ function NavigateWithParams(props) {
   }, propsWithParams));
 }
 function createClientRoute(opts) {
-  var route = opts.route;
+  var route = opts.route,
+    _opts$useStream2 = opts.useStream,
+    useStream = _opts$useStream2 === void 0 ? true : _opts$useStream2;
   var redirect = route.redirect,
     props = _objectWithoutProperties(route, _excluded);
   var Remote = opts.reactRouter5Compat ? RemoteComponentReactRouter5 : RemoteComponent;
@@ -72,7 +79,8 @@ function createClientRoute(opts) {
     }, /*#__PURE__*/React.createElement(Remote, {
       loader: /*#__PURE__*/React.memo(opts.routeComponent),
       loadingComponent: opts.loadingComponent || DefaultLoading,
-      hasChildren: opts.hasChildren
+      hasChildren: opts.hasChildren,
+      useStream: useStream
     }))
   }, props);
 }
@@ -95,20 +103,24 @@ function RemoteComponentReactRouter5(props) {
 
   // staticContext 没有兼容 好像没看到对应的兼容写法
   var Component = props.loader;
-  return /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
-  }, /*#__PURE__*/React.createElement(Component, {
+  var ComponentProps = {
     location: history.location,
     match: match,
     history: history,
     params: params,
     route: route,
     routes: clientRoutes
-  }, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null)));
+  };
+  var Remote = function Remote() {
+    return /*#__PURE__*/React.createElement(Component, ComponentProps, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null));
+  };
+  return props.useStream ? /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Remote, null)) : /*#__PURE__*/React.createElement(Remote, null);
 }
 function RemoteComponent(props) {
   var Component = props.loader;
-  return /*#__PURE__*/React.createElement(React.Suspense, {
+  return props.useStream ? /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
-  }, /*#__PURE__*/React.createElement(Component, null));
+  }, /*#__PURE__*/React.createElement(Component, null)) : /*#__PURE__*/React.createElement(Component, null);
 }

package/dist/server.js

@@ -21,7 +21,8 @@ function _getClientRootComponent() {
           components = _objectSpread({}, opts.routeComponents); // todo 参数对齐
           clientRoutes = createClientRoutes({
             routesById: opts.routes,
-            routeComponents: components
+            routeComponents: components,
+            useStream: opts.useStream
           });
           opts.pluginManager.applyPlugins({
             key: 'patchClientRoutes',

package/dist/types.d.ts

@@ -65,6 +65,7 @@ export interface IRootComponentOptions extends IHtmlHydrateOptions {
     };
     manifest: any;
     basename?: string;
+    useStream?: boolean;
 }
 export interface IHtmlProps extends IHtmlHydrateOptions {
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.3.31",
+  "version": "4.3.33",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",