diff --git a/examples/ssr-demo/src/pages/index.tsx b/examples/ssr-demo/src/pages/index.tsx index 279b00b9d5c1..f1e94defb8a0 100644 --- a/examples/ssr-demo/src/pages/index.tsx +++ b/examples/ssr-demo/src/pages/index.tsx @@ -15,11 +15,13 @@ import './index.less'; // @ts-ignore import styles from './index.less'; // @ts-ignore +import { useId } from 'react'; import umiLogo from './umi.png'; export default function HomePage() { const clientLoaderData = useClientLoaderData(); const serverLoaderData = useServerLoaderData(); + const id = useId(); useServerInsertedHTML(() => { return
inserted html
; @@ -28,6 +30,7 @@ export default function HomePage() { return (

Hello~

+

{id}

This is index.tsx

I should be pink

I should be cyan

diff --git a/packages/preset-umi/templates/server.tpl b/packages/preset-umi/templates/server.tpl index 13be23d98838..e47d0ddfef6e 100644 --- a/packages/preset-umi/templates/server.tpl +++ b/packages/preset-umi/templates/server.tpl @@ -1,4 +1,4 @@ -import { getClientRootComponent } from '{{{ serverRendererPath }}}'; +import { getClientRootComponent, getServerHTMLStart, getServerHTMLEnd } from '{{{ serverRendererPath }}}'; import { getRoutes } from './core/route'; import { createHistory as createClientHistory } from './core/history'; import { getPlugins as getClientPlugins } from './core/plugin'; @@ -48,6 +48,8 @@ const createOpts = { getRoutes, manifest: getManifest, getClientRootComponent, + getServerHTMLStart, + getServerHTMLEnd, helmetContext, createHistory, ServerInsertedHTMLContext, diff --git a/packages/renderer-react/src/server.tsx b/packages/renderer-react/src/server.tsx index bf0695372323..5cd62a4fb138 100644 --- a/packages/renderer-react/src/server.tsx +++ b/packages/renderer-react/src/server.tsx @@ -12,8 +12,6 @@ interface IHtmlProps { pluginManager: any; location: string; loaderData: { [routeKey: string]: any }; - manifest: any; - metadata?: IMetadata; } // Get the root React component for ReactDOMServer.renderToString @@ -60,53 +58,54 @@ export async function getClientRootComponent(opts: IHtmlProps) { {rootContainer} ); - return {app}; + return
{app}
; } -function Html({ - children, - loaderData, +export function getServerHTMLStart({ manifest, metadata, -}: React.PropsWithChildren) { - // TODO: 处理 head 标签，比如 favicon.ico 的一致性 - // TODO: root 支持配置 - - return ( - - - - - {metadata?.title && {metadata.title}} - {metadata?.description && ( - - )} - {metadata?.keywords?.length && ( - - )} - {metadata?.metas?.map((em) => ( - - ))} - {manifest.assets['umi.css'] && ( - - )} - - -