umijs · fz6m · Nov 7, 2023 · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/packages/preset-umi/src/features/tmpFiles/routes.ts b/packages/preset-umi/src/features/tmpFiles/routes.ts
@@ -165,6 +165,7 @@ export async function getRoutes(opts: {
             : [];
         if (enableSSR) {
           routes[id].hasServerLoader = exports.includes('serverLoader');
+          routes[id].hasMetadataLoader = exports.includes('metadataLoader');
         }
         if (enableClientLoader && exports.includes('clientLoader')) {
           routes[id].clientLoader = `clientLoaders['${id}']`;

diff --git a/packages/renderer-react/src/server.tsx b/packages/renderer-react/src/server.tsx
@@ -5,16 +5,26 @@ import { Routes } from './browser';
 import { createClientRoutes } from './routes';
 import { IRouteComponents, IRoutesById } from './types';
 
-// Get the root React component for ReactDOMServer.renderToString
-export async function getClientRootComponent(opts: {
+interface IMetadata {
+  title?: string;
+  description?: string;
+  keywords?: string[];
+  lang?: string;
+  metas?: Array<{name: string; content: string}>;
+}
+
+interface IHtmlProps {
   routes: IRoutesById;
   routeComponents: IRouteComponents;
   pluginManager: any;
   location: string;
   loaderData: { [routeKey: string]: any };
   manifest: any;
-  withoutHTML?: boolean;
-}) {
+  metadata?: IMetadata;
+}
+
+// Get the root React component for ReactDOMServer.renderToString
+export async function getClientRootComponent(opts: IHtmlProps) {
   const basename = '/';
   const components = { ...opts.routeComponents };
   const clientRoutes = createClientRoutes({
@@ -57,37 +67,33 @@ export async function getClientRootComponent(opts: {
       {rootContainer}
     </AppContext.Provider>
   );
-  if (opts.withoutHTML) {
-    return <>
-      <div id="root">{app}</div>
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `window.__UMI_LOADER_DATA__ = ${JSON.stringify(
-            opts.loaderData,
-          )}`,
-        }}
-      />
-    </>;
-  }
   return (
-    <Html loaderData={opts.loaderData} manifest={opts.manifest}>
+    <Html {...opts}>
       {app}
     </Html>
   );
 }
 
-function Html({ children, loaderData, manifest }: any) {
+function Html({ children, loaderData, manifest, metadata }: IHtmlProps & { children: React.ReactNode }) {
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
 
   return (
-    <html lang="en">
+    <html lang={metadata?.lang}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {manifest.assets['umi.css'] && (
           <link rel="stylesheet" href={manifest.assets['umi.css']} />
         )}
+        {metadata?.title && <title>{metadata.title}</title>}
+        {metadata?.description && (
+          <meta name="description" content={metadata.description} />
+        )}
+        {metadata?.keywords?.length && (
+          <meta name="keywords" content={metadata.keywords.join(',')} />
+        )}
+        {metadata?.metas?.map((em)=> <meta name={em.name} content={em.content}/>)}
       </head>
       <body>
         <noscript

diff --git a/packages/server/src/ssr.ts b/packages/server/src/ssr.ts
@@ -28,7 +28,6 @@ interface CreateRequestHandlerOptions {
   createHistory: (opts: any) => any;
   helmetContext?: any;
   ServerInsertedHTMLContext: React.Context<ServerInsertedHTMLHook | null>;
-  withoutHTML?: boolean;
   sourceDir?: string;
 }
 
@@ -89,6 +88,7 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
     }
 
     const loaderData: { [key: string]: any } = {};
+    const metadata: { [key: string]: any } = {};
     await Promise.all(
       matches
         .filter((id: string) => routes[id].hasServerLoader)
@@ -100,6 +100,17 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
                 routesWithServerLoader,
                 serverLoaderArgs,
               );
+              // 如果有metadataLoader，执行metadataLoader
+              // metadataLoader在serverLoader返回之后执行这样metadataLoader可以使用serverLoader的返回值
+              // 如果有多层嵌套路由和合并多层返回的metadata但最里层的优先级最高
+              if(routes[id].hasMetadataLoader) {
+                Object.assign(metadata, await executeMetadataLoader(
+                  id,
+                  routesWithServerLoader,
+                  serverLoaderArgs,
+                  loaderData[id],
+                ));
+              }
               resolve();
             }),
         ),
@@ -116,7 +127,7 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
       location: url,
       manifest,
       loaderData,
-      withoutHTML: opts.withoutHTML,
+      metadata,
     };
 
     const element = (await opts.getClientRootComponent(
@@ -333,3 +344,16 @@ async function executeLoader(
   // TODO: 处理错误场景
   return mod.serverLoader(serverLoaderArgs);
 }
+
+async function executeMetadataLoader(
+  routeKey: string,
+  routesWithServerLoader: RouteLoaders,
+  serverLoaderArgs?: IServerLoaderArgs,
+  serverLoaderData?: any, // serverLoader的返回值
+) {
+  const mod = await routesWithServerLoader[routeKey]();
+  if (!mod.serverLoader || typeof mod.serverLoader !== 'function') {
+    return;
+  }
+  return mod.metadataLoader(serverLoaderArgs, serverLoaderData);
+}