preload allways on the server

MrWangJustToDo · MrWangJustToDo · commit f76224643b9b · 2022-01-05T22:45:35.000+08:00
diff --git a/.env b/.env
@@ -5,8 +5,8 @@ PROD_PORT=5000
 PROD_HOST=localhost
 PUBLIC_API_HOST=localhost:9000
 CRYPTO_KEY=ad$cr3efW89ypg
-SSR=true
-UI=material
+SSR=false
+UI=chakra
 MIDDLEWARE=false
 ANIMATE_ROUTER=false
 SERVER_ENTRY=./src/server/entry.ts
diff --git a/package.json b/package.json
@@ -9,13 +9,13 @@
     "start": "cross-env NODE_ENV=production node ./dist/server/app"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.7.3",
+    "@chakra-ui/react": "^1.7.4",
     "@emotion/react": "^11.7.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
-    "@mui/material": "^5.2.6",
+    "@mui/material": "^5.2.7",
     "antd": "^4.18.2",
     "axios": "^0.24.0",
     "chalk": "4",
@@ -34,7 +34,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.2.2",
-    "react-intl": "^5.24.0",
+    "react-intl": "^5.24.1",
     "react-redux": "^7.2.6",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
@@ -72,7 +72,7 @@
     "@types/loadable__server": "^5.12.3",
     "@types/lodash": "^4.14.178",
     "@types/multer": "^1.4.7",
-    "@types/node": "^17.0.5",
+    "@types/node": "^17.0.8",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.21",
@@ -81,7 +81,7 @@
     "@types/webpack-env": "^1.16.3",
     "@types/webpack-hot-middleware": "^2.25.4",
     "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
+    "@typescript-eslint/parser": "^5.9.0",
     "autoprefixer": "^10.4.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
diff --git a/src/client/entry.tsx b/src/client/entry.tsx
@@ -7,8 +7,6 @@ import { createUniversalStore } from "store";
 import { log } from "utils/log";
 import { safeData } from "utils/safeData";
 import { StoreState } from "types/store";
-import { preLoad } from "utils/preLoad";
-import { allRoutes } from "router/routes";
 
 const place = document.querySelector("#__content__");
 
@@ -49,8 +47,7 @@ if (__UI__ === "material") {
 }
 
 if (!window.__ENV__.SSR) {
-  // for client side render, we need load component props first
-  preLoad(allRoutes, location.pathname, store).then(() => loadableReady(() => render(<Root store={store} />, place)));
+  loadableReady(() => render(<Root store={store} />, place));
 } else {
   if (__DEVELOPMENT__ && __MIDDLEWARE__) {
     log("not hydrate render on client", "warn");
diff --git a/src/server/middleware/renderPage/renderCSR.tsx b/src/server/middleware/renderPage/renderCSR.tsx
@@ -6,11 +6,11 @@ import { HTML } from "template/Html";
 import { manifestLoadable } from "utils/manifest";
 
 import { AnyAction, composeRender } from "./compose";
-import { globalEnv, initLang, initStore, loadLang } from "./middleware";
+import { globalEnv, initLang, initStore, loadLang, loadStore } from "./middleware";
 import { ServerError } from "server/utils/error";
 
 // 客户端渲染
-const targetRender: AnyAction = async ({ res, store, lang, env }) => {
+const targetRender: AnyAction = async ({ res, store, lang, env, serverSideProps = {} }) => {
   if (!store || !lang || !env) {
     throw new ServerError("server 初始化失败", 500);
   }
@@ -19,20 +19,19 @@ const targetRender: AnyAction = async ({ res, store, lang, env }) => {
   const styleElements = webExtractor.getStyleElements();
   const scriptElements = webExtractor.getScriptElements();
 
-  env["LANG"] = lang;
-
   res.send(
     "<!doctype html>" +
       renderToString(
         <HTML
-        env={JSON.stringify(env)}
-        lang={JSON.stringify(lang)}
-        script={scriptElements}
-        link={linkElements.concat(styleElements)}
+          env={JSON.stringify(env)}
+          lang={JSON.stringify(lang)}
+          script={scriptElements}
+          link={linkElements.concat(styleElements)}
+          serverSideProps={JSON.stringify(serverSideProps)}
           reduxInitialState={JSON.stringify(store.getState())}
         />
       )
   );
 };
 
-export const renderCSR = composeRender(globalEnv, initLang, initStore, loadLang)(targetRender);
+export const renderCSR = composeRender(globalEnv, initLang, initStore, loadStore, loadLang)(targetRender);
diff --git a/src/server/middleware/renderPage/renderSSR/renderAntDesign.tsx b/src/server/middleware/renderPage/renderSSR/renderAntDesign.tsx
@@ -38,8 +38,8 @@ export const targetRender: SafeAction = async ({ req, res, store, lang, env, ser
     "<!doctype html>" +
       renderToString(
         <HTML
-          lang={JSON.stringify(lang)}
           env={JSON.stringify(env)}
+          lang={JSON.stringify(lang)}
           script={scriptElements}
           helmetContext={helmetContext}
           link={linkElements.concat(styleElements)}
diff --git a/src/server/middleware/renderPage/renderSSR/renderChakra.tsx b/src/server/middleware/renderPage/renderSSR/renderChakra.tsx
@@ -52,8 +52,8 @@ export const targetRender: SafeAction = async ({ req, res, store, lang, env, ser
     "<!doctype html>" +
       renderToString(
         <HTML
-          lang={JSON.stringify(lang)}
           env={JSON.stringify(env)}
+          lang={JSON.stringify(lang)}
           script={scriptElements}
           helmetContext={helmetContext}
           emotionChunks={emotionChunks}
diff --git a/src/server/middleware/renderPage/renderSSR/renderMaterial.tsx b/src/server/middleware/renderPage/renderSSR/renderMaterial.tsx
@@ -54,8 +54,8 @@ export const targetRender: SafeAction = async ({ req, res, store, lang, env, ser
     "<!doctype html>" +
       renderToString(
         <HTML
-          lang={JSON.stringify(lang)}
           env={JSON.stringify(env)}
+          lang={JSON.stringify(lang)}
           script={scriptElements}
           helmetContext={helmetContext}
           emotionChunks={emotionChunks}
diff --git a/yarn.lock b/yarn.lock
