fix live router & csr

Author: MrWangJustToDo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ssr",
-  "version": "1.2.1",
+  "version": "1.2.8",
   "author": "mrwang",
   "license": "MIT",
   "scripts": {
@@ -19,17 +19,17 @@
     "@emotion/styled": "^11.6.0",
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
-    "@mui/material": "^5.3.1",
+    "@mui/material": "^5.4.0",
     "antd": "^4.18.5",
     "axios": "^0.25.0",
     "chalk": "4",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
-    "dotenv": "^14.3.2",
+    "dotenv": "^16.0.0",
     "express": "^4.17.2",
     "express-session": "^1.17.1",
-    "framer-motion": "^6.2.3",
+    "framer-motion": "^6.2.4",
     "immer": "^9.0.12",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -46,21 +46,21 @@
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.4.1",
     "spark-md5": "^3.0.1",
-    "webpack": "^5.67.0",
+    "webpack": "^5.68.0",
     "zustand": "^3.6.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.0",
     "@babel/plugin-proposal-export-default-from": "^7.16.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@babel/plugin-proposal-private-methods": "^7.16.11",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
@@ -77,24 +77,24 @@
     "@types/loadable__server": "^5.12.3",
     "@types/lodash": "^4.14.178",
     "@types/multer": "^1.4.7",
-    "@types/node": "^17.0.13",
-    "@types/react": "^17.0.38",
+    "@types/node": "^17.0.14",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.22",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.3",
     "@types/webpack-hot-middleware": "^2.25.4",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
     "clean-webpack-plugin": "^4.0.0",
-    "core-js": "^3.20.3",
+    "core-js": "^3.21.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
+    "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.7.0",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
@@ -104,23 +104,23 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.5.0",
+    "fork-ts-checker-webpack-plugin": "^7.0.0",
     "mini-css-extract-plugin": "^2.5.3",
     "node-sass": "^7.0.1",
     "nodemon": "^2.0.15",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "react-refresh": "^0.11.0",
-    "sass": "^1.49.0",
+    "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.2.1",
     "thread-loader": "^3.0.4",
     "typescript": "^4.5.5",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-middleware": "^5.3.0",
-    "webpack-dev-server": "^4.7.3",
+    "webpack-dev-middleware": "^5.3.1",
+    "webpack-dev-server": "^4.7.4",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-manifest-plugin": "^4.1.1",
     "webpack-merge": "^5.7.3",

readme.md

@@ -54,7 +54,7 @@ yarn run start
 
 ## 静态路由
 
-## 文件路由 自动 query 参数支持 使用 :参数名(:id.tsx) 文件作为的约定 开发环境支持 page 新建删除的实时路由更新(middleware 模式下支持, 加载一次后删除会出错)
+## 文件路由 自动 query 参数支持 使用 :参数名(:id.tsx) 文件作为的约定 开发环境支持 page 新建删除的实时路由更新(middleware 模式下支持)
 
 ## 装饰器
 

src/client/entry.tsx

@@ -50,11 +50,8 @@ if (__UI__ === "material") {
 
 if (__CSR__) {
   log("pure render by client", "warn");
-  const { allRoutes } = require("router/routes");
-  const { preLoad, preLoadLang } = require("utils/preLoad");
-  Promise.all([preLoadLang({ store, lang: window.__ENV__.LANG }), preLoad(allRoutes, location.pathname, store)]).then(() =>
-    loadableReady(() => render(<Root store={store} />, place))
-  );
+  const { preLoadLang } = require("utils/preLoad");
+  preLoadLang({ store, lang: window.__ENV__.LANG }).then(() => loadableReady(() => render(<Root store={store} />, place)));
 } else {
   if (!window.__ENV__.isSSR) {
     loadableReady(() => render(<Root store={store} />, place));

src/components/WrapperRoute/index.tsx

@@ -1,17 +1,18 @@
 import { createContext, useContext } from "react";
 
-import { useHydrate } from "hooks/useHydrate";
 import { usePreLoad } from "hooks/usePreLoad";
-import { preLoad } from "utils/preLoad";
+import { hydrateLoad, preLoad } from "utils/preLoad";
 
 import type { useLocation } from "react-router";
 import type { WrapperRouteType } from "types/components";
 
 export const LoadedLocationContext = createContext<ReturnType<typeof useLocation> | Record<string, never>>({});
 
 export const WrapperRoute: WrapperRouteType = ({ children, routes, LoadingBar }) => {
-  const { location } = usePreLoad({ routes, preLoad });
-  useHydrate({ routes, pathName: location.pathname });
+  const { location } = usePreLoad({ routes, preLoad, hydrate: hydrateLoad });
+
+  // for pure client render
+  if (!location) return null;
 
   return (
     <LoadedLocationContext.Provider value={location}>

src/hooks/useHydrate.ts

@@ -1,5 +1,5 @@
 import cookie from "js-cookie";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useStore } from "react-redux";
 import { useLocation, useNavigate } from "react-router";
 
@@ -10,28 +10,37 @@ import { useChangeLoadingWithoutRedux } from "./useLoadingBar";
 import type { UsePreLoadType } from "types/hooks";
 
 /* WrapperRoute */
-const usePreLoad: UsePreLoadType = ({ routes, preLoad }) => {
+const usePreLoad: UsePreLoadType = ({ routes, preLoad, hydrate }) => {
   const isRedirect = useRef<string | undefined>();
   const store = useStore();
   const location = useLocation();
   const navigate = useNavigate();
   const { start, end } = useChangeLoadingWithoutRedux();
-  const firstLoad = useRef(true);
-  const loadedPath = useRef<string | null>("");
+  // for pure client render, need preload data
+  const firstLoad = useRef(__CSR__ ? false : true);
+  const loadedPath = useRef<string | undefined>("");
   const loadingPath = useRef<string | null>("");
   const timer1 = useRef<NodeJS.Timeout | null>(null);
   const timer2 = useRef<NodeJS.Timeout | null>(null);
   const storeRef = useRef(store);
-  const [loadedLocation, setLoadedLocation] = useState(location);
+  // for pure client render, there are not exist loaded location
+  const [loadedLocation, setLoadedLocation] = useState(__CSR__ ? undefined : location);
 
   loadingPath.current = location.pathname;
 
-  loadedPath.current = loadedLocation.pathname;
+  loadedPath.current = loadedLocation?.pathname;
 
   storeRef.current = store;
 
+  useMemo(() => {
+    if (loadedLocation?.pathname) {
+      hydrate(routes, loadedLocation.pathname);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
-    // skip first load
+    // skip first load if need
     if (!firstLoad.current) {
       const isRedirectCurrentPath = isRedirect.current && isRedirect.current === location.pathname;
       if (!isRedirectCurrentPath) {

src/hooks/usePreLoad.ts

@@ -6,7 +6,7 @@ export const globalEnv: Middleware = (next) => async (args) => {
   const { PUBLIC_API_HOST, CRYPTO_KEY } = process.env;
   args.env = {
     UI: __UI__,
-    isSSR: getIsSSR() || args.req.query.isSSR,
+    isSSR: getIsSSR() || args.req.query.isSSR || false,
     CRYPTO_KEY,
     PUBLIC_API_HOST,
     isMIDDLEWARE: getIsMiddleware(),

src/server/middleware/renderPage/middleware/globalEnv.ts

@@ -8,7 +8,7 @@ import { manifestLoadable } from "utils/manifest";
 import { composeRender } from "./compose";
 import { globalEnv, initLang, initStore, loadLang, loadStore } from "./middleware";
 
-import type { AnyAction} from "./compose";
+import type { AnyAction } from "./compose";
 
 // 客户端渲染
 const targetRender: AnyAction = async ({ res, store, lang, env, serverSideProps = {} }) => {

src/server/middleware/renderPage/renderCSR.tsx

@@ -1,15 +1,16 @@
 import type { useLocation } from "react-router";
 import type { PreLoadRouteConfig } from "types/router";
-import type { preLoad } from "utils/preLoad";
+import type { hydrateLoad, preLoad } from "utils/preLoad";
 
 interface UsePreLoadProps {
   routes: PreLoadRouteConfig[];
   preLoad: typeof preLoad;
+  hydrate: typeof hydrateLoad;
 }
 export interface UsePreLoadType {
   (props: UsePreLoadProps): {
     loading?: boolean;
-    location: ReturnType<typeof useLocation>;
+    location?: ReturnType<typeof useLocation>;
   };
 }
 

src/types/hooks/index.d.ts

@@ -3,7 +3,8 @@ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 const optimizationConfig = ({ env, isDev = true }) => {
   if (env === "client") {
-    return isDev
+    // 开发模式下   为了使动态路由即使生效不出错， 不能使用这个配置
+    return isDev && false
       ? {
           usedExports: true,
           runtimeChunk: "single",