fix inject props for fast refresh

Author: MrWangJustToDo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ssr",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "author": "mrwang",
   "license": "MIT",
   "scripts": {
@@ -15,60 +15,60 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.7",
+    "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
-    "@mui/material": "^5.6.2",
-    "antd": "^4.19.5",
-    "axios": "^0.26.1",
+    "@mui/material": "^5.8.0",
+    "antd": "^4.20.4",
+    "axios": "^0.27.2",
     "chalk": "4",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv": "^16.0.0",
-    "express": "^4.17.3",
-    "express-session": "^1.17.2",
-    "framer-motion": "6.2.9",
-    "immer": "^9.0.12",
+    "express": "^4.18.1",
+    "express-session": "^1.17.3",
+    "framer-motion": "6.3.3",
+    "immer": "^9.0.13",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "multer": "^1.4.4",
     "pretty-error": "^4.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet-async": "^1.2.3",
-    "react-intl": "^5.24.8",
-    "react-redux": "^7.2.8",
+    "react-helmet-async": "1.2.3",
+    "react-intl": "5.24.8",
+    "react-redux": "^8.0.1",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.4.1",
     "spark-md5": "^3.0.1",
-    "webpack": "^5.72.0",
+    "webpack": "^5.72.1",
     "zustand": "^3.7.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.9",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.9",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-decorators": "^7.17.12",
+    "@babel/plugin-proposal-export-default-from": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
+    "@babel/plugin-proposal-private-methods": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.17.9",
-    "@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",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/plugin-transform-runtime": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
     "@types/compression": "^1.7.2",
     "@types/cookie-parser": "^1.4.2",
     "@types/cors": "^2.8.12",
@@ -83,50 +83,49 @@
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.42",
     "@types/react-dom": "^17.0.14",
-    "@types/react-redux": "^7.1.23",
     "@types/webpack": "^5.28.0",
-    "@types/webpack-env": "^1.16.3",
+    "@types/webpack-env": "^1.17.0",
     "@types/webpack-hot-middleware": "^2.25.6",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
-    "autoprefixer": "^10.4.4",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
+    "autoprefixer": "^10.4.7",
     "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.4",
-    "babel-plugin-import": "^1.13.3",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-import": "^1.13.5",
     "clean-webpack-plugin": "^4.0.0",
-    "core-js": "^3.21.1",
+    "core-js": "^3.22.5",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.11.0",
+    "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.3",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "^7.0.1",
     "nodemon": "^2.0.15",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.14",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.6.2",
-    "react-refresh": "^0.12.0",
-    "sass": "^1.50.0",
+    "react-refresh": "^0.13.0",
+    "sass": "^1.52.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
     "thread-loader": "^3.0.4",
     "typescript": "^4.5.5",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-middleware": "^5.3.1",
-    "webpack-dev-server": "^4.8.1",
+    "webpack-dev-middleware": "^5.3.3",
+    "webpack-dev-server": "^4.9.0",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0",

src/client/entry.tsx

@@ -12,26 +12,18 @@ const place = document.querySelector("#__content__");
 
 const preLoadEnvElement = document.querySelector("script#__preload_env__");
 
-const preLoadPropsElement = document.querySelector("script#__preload_props__");
-
 const preLoadStateElement = document.querySelector("script#__preload_state__");
 
 const store = createUniversalStore({ initialState: JSON.parse(preLoadStateElement?.innerHTML || "{}") as StoreState });
 
 window.__ENV__ = JSON.parse(preLoadEnvElement?.innerHTML || "{}");
 
-window.__INITIAL_PROPS_SSR__ = JSON.parse(preLoadPropsElement?.innerHTML || "{}");
-
 window.__PRELOAD_STORE_STATE__ = JSON.parse(preLoadStateElement?.innerHTML || "{}");
 
 safeData(window.__ENV__);
 
 safeData(window as unknown as Record<string, unknown>, "__ENV__");
 
-safeData(window.__INITIAL_PROPS_SSR__);
-
-safeData(window as unknown as Record<string, unknown>, "__INITIAL_PROPS_SSR__");
-
 safeData(window.__PRELOAD_STORE_STATE__);
 
 safeData(window as unknown as Record<string, unknown>, "__PRELOAD_STORE_STATE__");

src/components/LoadingBar/LoadingBar.tsx

@@ -6,19 +6,18 @@ import { useMounted } from "hooks/useMounted";
 
 import style from "./index.module.scss";
 
-
 let div: HTMLDivElement | undefined;
 
-export const Bar = memo(
-  forwardRef<HTMLDivElement>(function Bar(_, ref) {
-    useEffectOnce(() => {
-      div = document.createElement("div");
-      div.id = "__loading_bar__";
-      document.body.prepend(div);
-    });
+const _Bar = forwardRef<HTMLDivElement>(function Bar(_, ref) {
+  useEffectOnce(() => {
+    div = document.createElement("div");
+    div.id = "__loading_bar__";
+    document.body.prepend(div);
+  });
+
+  const mounted = useMounted();
 
-    const mounted = useMounted();
+  return mounted ? createPortal(<div ref={ref} className={style.loadingBar} style={{ height: `0px`, transform: `scale(0, 1)` }} />, div as Element) : null;
+});
 
-    return mounted ? createPortal(<div ref={ref} className={style.loadingBar} style={{ height: `0px`, transform: `scale(0, 1)` }} />, div as Element) : null;
-  })
-);
+export const Bar = memo(_Bar);

src/components/RenderMatch.tsx

@@ -8,12 +8,12 @@ import { getIsAnimateRouter } from "utils/env";
 import { useLoadedLocation } from "./WrapperRoute";
 
 export const RenderMatch = () => {
-  const location = useLoadedLocation();
-  const all = useRoutes(allRoutes, location);
+  const loaded = useLoadedLocation();
+  const all = useRoutes(allRoutes, loaded?.location);
 
   return getIsAnimateRouter() ? (
     <AnimatePresence exitBeforeEnter>
-      <React.Fragment key={location.pathname}>
+      <React.Fragment key={loaded?.location.pathname}>
         <motion.div
           initial="initial"
           animate="in"

src/components/WrapperRoute/index.tsx

@@ -1,21 +1,20 @@
 import { createContext, useContext } from "react";
 
 import { usePreLoad } from "hooks/usePreLoad";
-import { hydrateLoad, preLoad } from "utils/preLoad";
+import { 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 LoadedLocationContext = createContext<ReturnType<typeof usePreLoad>["loaded"] | null>(null);
 
 export const WrapperRoute: WrapperRouteType = ({ children, routes, LoadingBar }) => {
-  const { location } = usePreLoad({ routes, preLoad, hydrate: hydrateLoad });
+  const { loaded } = usePreLoad({ routes, preLoad });
 
   // for pure client render
-  if (!location) return null;
+  if (!loaded) return null;
 
   return (
-    <LoadedLocationContext.Provider value={location}>
+    <LoadedLocationContext.Provider value={loaded}>
       <LoadingBar />
       {children}
     </LoadedLocationContext.Provider>

src/config/action.ts

@@ -1,8 +1,8 @@
 enum actionName {
+  globalInitialProps = "globalInitialProps",
   currentToken = "currentToken",
   currentLang = "currentLang",
   currentLoading = "currentLoading",
-  currentInitialState = "currentInitialState",
 }
 
 export { actionName };

src/hooks/useGetInitialProps.ts

@@ -0,0 +1,17 @@
+import { useSelector } from "react-redux";
+
+import { useLoadedLocation } from "components/WrapperRoute";
+import { generateInitialPropsKey } from "utils/preLoad";
+
+import type { StoreState } from "types/store";
+
+const globalInitialSelector = (state: StoreState) => state.client.globalInitialProps.data;
+
+export const useGetInitialProps = () => {
+  const globalInitialProps = useSelector<StoreState, StoreState["client"]["globalInitialProps"]["data"]>(globalInitialSelector);
+  const loaded = useLoadedLocation();
+  const propsKey = generateInitialPropsKey(loaded?.location.pathname || "", loaded?.query || new URLSearchParams());
+  const props = globalInitialProps[propsKey];
+
+  return props;
+};

src/hooks/useLang.ts

@@ -1,8 +1,9 @@
 import cookie from "js-cookie";
 import { useCallback, useRef } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 import { apiName } from "config/api";
+import { useDispatch } from "store";
 import { getDataAction_Server } from "store/reducer/server/share/action";
 
 import { useChangeLoadingWithoutRedux } from "./useLoadingBar";