fix(SSR): remove extension scripts before client render

yuntijs · Sep 9, 2024 · 2ca39e5 · 2ca39e5
1 parent f3b2f10
commit 2ca39e5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/example/.dumirc.ts b/example/.dumirc.ts
@@ -102,12 +102,9 @@ export default defineConfig({
     { id: 'en-US', name: 'English', suffix: '-en' },
   ],
   mfsu: isWin ? undefined : {},
+  hash: true,
   npmClient: 'pnpm',
-  exportStatic: {
-    // 忽略预渲染失败的错误
-    ignorePreRenderError: true,
-  },
-  ...(isProduction ? { ssr: { builder: 'webpack' } } : {}),
+  ...(isProduction ? { ssr: {} } : {}),
   ...(isPreview ? { devtool: 'source-map' } : {}),
   styles: [
     `html, body { background: transparent;  }

diff --git a/src/layouts/DocLayout/DocumentLayout.tsx b/src/layouts/DocLayout/DocumentLayout.tsx
@@ -58,7 +58,7 @@ const DocumentLayout = memo(() => {
   const shouldHideToc = fm.toc === false || noToc;
   const hideToc = mobile ? shouldHideToc : !laptop || shouldHideToc;
 
-  const HelmetBlock = useCallback(() => {
+  const getHelmetBlock = useCallback(() => {
     const title = customConfig?.title || fm.title;
     const description = customConfig?.description || fm.description || themeConfig.description;
     const keywords = customConfig?.keywords || fm.keywords || themeConfig.keywords;
@@ -124,15 +124,15 @@ const DocumentLayout = memo(() => {
   ) {
     return (
       <>
-        <HelmetBlock />
+        {getHelmetBlock()}
         {clientRender && outlet}
       </>
     );
   }
 
   return (
     <>
-      <HelmetBlock />
+      {getHelmetBlock()}
       {clientRender && (
         <Layout
           asideWidth={theme.sidebarWidth}

diff --git a/src/layouts/GlobalLayout.tsx b/src/layouts/GlobalLayout.tsx
@@ -47,13 +47,24 @@ const GlobalLayout: FC = () => {
 
   // Demo page should not contain App component
   if (!demoPage) {
-    content = <App>{outlet}</App>;
+    content = (
+      <App>
+        {/**
+        * @Todo 更新到 React 19 后，可移除这部分代码
+        * This removes anything added to html from extensions, causing hydration issue
+         https://github.com/remix-run/remix/issues/4822
+         https://github.com/facebook/react/issues/24430
+       */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `document.querySelectorAll("html > script").forEach((s) => s.parentNode?.removeChild(s));`,
+          }}
+        />
+        {outlet}
+      </App>
+    );
   }
 
-  // if (!isBrowser) {
-  //   (global as any).styleCache = styleCache;
-  // }
-
   return (
     <StyleProvider
       cache={styleCache}

diff --git a/src/plugin/index.ts b/src/plugin/index.ts
@@ -47,7 +47,7 @@ const SSRPlugin = (api: IApi) => {
     })
   );
 
-  if (!api.userConfig.ssr) return;
+  // if (!api.userConfig.ssr) return;
 
   api.logger.info('detect ssr config, when building html will extract css.');
 
@@ -65,9 +65,13 @@ const SSRPlugin = (api: IApi) => {
     return fileName;
   };
 
-  const addLinkStyle = (html: string, cssFile: string) => {
+  const addLinkStyle = (html: string, cssFile: string, prepend = false) => {
     const prefix = api.userConfig.publicPath || api.config.publicPath;
 
+    if (prepend) {
+      return html.replace('<head>', `<head><link rel="stylesheet" href="${prefix + cssFile}">`);
+    }
+
     return html.replace('</head>', `<link rel="stylesheet" href="${prefix + cssFile}"></head>`);
   };
 
@@ -83,6 +87,7 @@ const SSRPlugin = (api: IApi) => {
         // 1. 提取 antd-style 样式
         const styles = extractEmotionStyle(file.content);
 
+        // 2. 提取每个样式到独立 css 文件
         for (const result of styles) {
           api.logger.event(
             `${chalk.yellow(file.path)} include ${chalk.blue`[${result!.key}]`} ${chalk.yellow(
@@ -93,6 +98,7 @@ const SSRPlugin = (api: IApi) => {
           const cssFile = writeCSSFile(result!.key, result!.ids.join(''), result!.css);
 
           file.content = addLinkStyle(file.content, cssFile);
+
           // @Todo: move '</body></html>' to the end for workaround
           file.content = file.content.replace('</body></html>', '') + '</body></html>';
         }