fix(nextjs-ssr): fix hydrate issue on shop page (#2729)

Author: CaioRolla

nextjs-ssr/checkout/package.json

@@ -8,13 +8,13 @@
     "start": "NODE_ENV=production next start"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "5.11.5",
+    "@module-federation/nextjs-mf": "6.0.7",
     "lodash": "4.17.21",
     "next": "12.2.2",
-    "next-compose-plugins": "^2.2.1",
+    "next-compose-plugins": "2.2.1",
     "nextjs-shared": "file:../shared",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "webpack": "5.72.1",
     "webpack-merge": "^5.8.0"
   }

nextjs-ssr/home/package.json

@@ -8,13 +8,13 @@
     "start": "NODE_ENV=production next start -p 3001"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "5.11.5",
+    "@module-federation/nextjs-mf": "6.0.7",
     "lodash": "4.17.21",
     "next": "12.2.2",
-    "next-compose-plugins": "^2.2.1",
+    "next-compose-plugins": "2.2.1",
     "nextjs-shared": "file:../shared",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "webpack": "5.72.1",
     "webpack-merge": "^5.8.0"
   }

nextjs-ssr/shop/package.json

@@ -8,13 +8,13 @@
     "start": "NODE_ENV=production next start -p 3002"
   },
   "dependencies": {
-    "@module-federation/nextjs-mf": "5.11.5",
+    "@module-federation/nextjs-mf": "6.0.7",
     "lodash": "4.17.21",
     "next": "12.2.2",
-    "next-compose-plugins": "^2.2.1",
+    "next-compose-plugins": "2.2.1",
     "nextjs-shared": "file:../shared",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "webpack": "5.72.1",
     "webpack-merge": "^5.8.0"
   }

nextjs-ssr/shop/pages/_app.js

@@ -1,15 +1,19 @@
+import { Suspense } from "react";
 import App from 'next/app';
 import dynamic from 'next/dynamic';
-const Nav = dynamic(() => import('home/nav'));
+const Nav = dynamic(() => import('home/nav') ,{suspense:true});
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
+      <Suspense fallback={'loading'}>
       <Nav />
+      </Suspense>
       <Component {...pageProps} />
     </>
   );
 }
+
 MyApp.getInitialProps = async ctx => {
   const appProps = await App.getInitialProps(ctx);
   return appProps;

nextjs-ssr/shop/pages/shop.js

@@ -32,7 +32,7 @@ const Shop = props => (
   </div>
 );
 Shop.getInitialProps = async () => {
-  const swapi = await fetch('https://swapi.dev/api/people/1').then(res => res.json());
+  const swapi = await fetch('https://jsonplaceholder.typicode.com/todos/2').then(res => res.json());
   return swapi;
 };
 export default Shop;