feat: 优化部分ssr代码

umijs · Mar 28, 2024 · a792b3b · a792b3b
1 parent aae6bde
commit a792b3b
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 30 deletions.
diff --git a/examples/ssr-demo/.umirc.ts b/examples/ssr-demo/.umirc.ts
@@ -1,7 +1,6 @@
 export default {
   svgr: {},
   hash: true,
-  mfsu: false,
   routePrefetch: {},
   manifest: {},
   clientLoader: {},

diff --git a/package.json b/package.json
@@ -1,6 +1,5 @@
 {
   "private": true,
-  "repository": "[email protected]:umijs/umi.git",
   "scripts": {
     "bootstrap": "umi-scripts bootstrap",
     "build": "umi-scripts turbo build",

diff --git a/packages/preset-umi/src/commands/dev/plugins/ViteHtmlPlugin.ts b/packages/preset-umi/src/commands/dev/plugins/ViteHtmlPlugin.ts
@@ -1,5 +1,4 @@
-import { getMarkup } from '@umijs/server';
-import { IOpts } from '@umijs/server/dist/types';
+import { getMarkup, IOpts } from '@umijs/server';
 import type { Plugin } from 'vite';
 import { IApi } from '../../../types';
 import { getMarkupArgs } from '../getMarkupArgs';

diff --git a/packages/preset-umi/src/features/exportStatic/exportStatic.ts b/packages/preset-umi/src/features/exportStatic/exportStatic.ts
@@ -2,7 +2,7 @@ import { getMarkup } from '@umijs/server';
 import { lodash, logger, Mustache, winPath } from '@umijs/utils';
 import assert from 'assert';
 import { dirname, join, relative } from 'path';
-import type { IApi, IRoute, IUserExtraRoute } from '../../types';
+import type { IApi, IRoute } from '../../types';
 import { absServerBuildPath } from '../ssr/utils';
 
 let markupRender: any;
@@ -17,6 +17,8 @@ interface IExportHtmlItem {
   prerender: boolean;
 }
 
+type IUserExtraRoute = string | { path: string; prerender: boolean };
+
 /**
  * get export html data from routes
  */

diff --git a/packages/preset-umi/src/features/tmpFiles/tmpFiles.ts b/packages/preset-umi/src/features/tmpFiles/tmpFiles.ts
@@ -533,7 +533,7 @@ if (process.env.NODE_ENV === 'development') {
             metas,
           }),
           scripts: JSON.stringify(scripts || []),
-          hydrateFromHtml: !!ssr?.hydrateFromHtml,
+          hydrateFromHtml: ssr?.hydrateFromHtml ?? true,
         },
       });
     }

diff --git a/packages/preset-umi/src/types.ts b/packages/preset-umi/src/types.ts
@@ -28,8 +28,6 @@ import type CodeFrameError from './features/transform/CodeFrameError';
 export { UmiApiRequest, UmiApiResponse } from './features/apiRoute';
 export { webpack, IConfig };
 
-export type IUserExtraRoute = string | { path: string; prerender: boolean };
-
 export type IScript =
   | Partial<{
       async: boolean;

diff --git a/packages/preset-umi/templates/server.tpl b/packages/preset-umi/templates/server.tpl
@@ -53,7 +53,7 @@ const createOpts = {
   ServerInsertedHTMLContext,
   metadata: {{{metadata}}},
   scripts: {{{scripts}}},
-  hydrateFromHtml: `{{{hydrateFromHtml}}}`
+  hydrateFromHtml: {{{hydrateFromHtml}}}
 
 };
 const requestHandler = createRequestHandler(createOpts);

diff --git a/packages/renderer-react/src/browser.tsx b/packages/renderer-react/src/browser.tsx
@@ -97,8 +97,8 @@ export type RenderClientOpts = {
    */
   rootElement?: HTMLElement;
   /**
-   * ssr 渲染根节点
-   * @doc 默认ture, 为html, false时使用app root
+   * ssr 是否从 html 根节点开始 hydrate
+   * @doc 默认 true，从 html 开始渲染，false 时从 app root 开始
    */
   hydrateFromHtml?: boolean;
   /**
@@ -341,12 +341,11 @@ export function renderClient(opts: RenderClientOpts) {
   if (opts.components) return Browser;
   if (opts.hydrate) {
     ReactDOM.hydrateRoot(
-      document,
+      document.querySelector('html')!,
       <Html {...opts}>
         <Browser />
       </Html>,
     );
-    // ReactDOM.hydrateRoot(rootElement, <Browser />);
     return;
   }
 

diff --git a/packages/renderer-react/src/html.tsx b/packages/renderer-react/src/html.tsx
@@ -1,17 +1,5 @@
 import React from 'react';
-import { IHtmlProps } from './types';
-
-export type IScript =
-  | Partial<{
-      async: boolean;
-      charset: string;
-      content: string;
-      crossOrigin: string | null;
-      defer: boolean;
-      src: string;
-      type: string;
-    }>
-  | string;
+import { IHtmlProps, IScript } from './types';
 
 const RE_URL = /^(http:|https:)?\/\//;
 
@@ -24,7 +12,7 @@ function isUrl(str: string) {
   );
 }
 
-function genaretorScript(script: IScript, extraProps = {}) {
+function normalizeScripts(script: IScript, extraProps = {}) {
   if (typeof script === 'string') {
     return isUrl(script)
       ? {
@@ -87,7 +75,7 @@ export function Html({
           }
         })}
         {metadata?.headScripts?.map((script: IScript, key: number) => {
-          const { content, ...rest } = genaretorScript(script);
+          const { content, ...rest } = normalizeScripts(script);
           return (
             <script key={key} {...(rest as any)}>
               {content}
@@ -116,7 +104,7 @@ export function Html({
           />
         )}
         {metadata?.scripts?.map((script: IScript, key: number) => {
-          const { content, ...rest } = genaretorScript(script);
+          const { content, ...rest } = normalizeScripts(script);
           return (
             <script key={key} {...(rest as any)}>
               {content}

diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts
@@ -5,8 +5,30 @@ import ReactDOMServer from 'react-dom/server';
 // import { createServerRoutes } from './routes';
 import { normalizeScripts } from './scripts';
 import { normalizeStyles } from './styles';
-import { IOpts } from './types';
 
+export interface IOpts {
+  base: string;
+  routes: Record<
+    string,
+    {
+      path: string;
+      file: string;
+      id: string;
+      parentId?: string;
+    }
+  >;
+  links?: Record<string, string>[];
+  metas?: Record<string, string>[];
+  styles?: (Record<string, string> | string)[];
+  favicons?: string[];
+  title?: string;
+  headScripts?: (Record<string, string> | string)[];
+  scripts?: (Record<string, string> | string)[];
+  mountElementId?: string;
+  esmScript?: boolean;
+  modifyHTML?: (html: string, args: { path?: string }) => Promise<string>;
+  historyType?: 'hash' | 'browser';
+}
 export async function getMarkup(
   opts: Omit<IOpts, 'routes'> & {
     path?: string;
-Original file line number
+Diff line change
@@ Expand Up / @@ -533,7 +533,7 @@ if (process.env.NODE_ENV === 'development') { @@
                 metas,
               }),
               scripts: JSON.stringify(scripts || []),
-              hydrateFromHtml: !!ssr?.hydrateFromHtml,
+              hydrateFromHtml: ssr?.hydrateFromHtml ?? true,
             },
           });
         }
@@ Expand Down @@