Use useMemo for hydration and avoid unnecessary hydrates (#510)

* Use useMemo for hydration and avoid unnecessary hydrates (#502)

* Upgrade packages and refactor a bit
* Added necessary testing dependency
* Stop hydrating on server and use useLayoutEffect for client hydration
* Added pokemon page with rtk's createApi
* Added back dispatch in GSP in demo repo
* A change in query params constitutes a new page now
* Improve performance by using another hook on server
* Add detail page
* New approach: split gsp and gssp and hydrate based on those
* Added a second type of initial state handling with more explanations
* Improved useMemo comment
* Make sure hydrates work when staying on the same page
* Add links to demo repo to test issue (seems like no issue)
* Proper gipp fix (#512)
* ESLint fix
* Gipp testcase and example page in RTK repo (#514)
* Add GIP to _app and add GIP in page to RTK repo
* Added e2e test for RTK repo
* Added testcase for GIAP and GIPP to wrapper
* Consistent casing and formatting in comments

Fix #493 #495 #496

Co-authored-by: voinik <[email protected]>

Author: kirill-konshin

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -142,12 +142,12 @@ import {AppProps} from 'next/app';
 import {wrapper} from '../components/store';
 
 const MyApp: FC<AppProps> = ({Component, ...rest}) => {
-    const {store, props} = wrapper.useWrappedStore(rest);
-    return (
-        <Provider store={store}>
-            <Component {...props.pageProps} />
-        </Provider>
-    );
+  const {store, props} = wrapper.useWrappedStore(rest);
+  return (
+    <Provider store={store}>
+      <Component {...props.pageProps} />
+    </Provider>
+  );
 };
 ```
 
@@ -183,20 +183,20 @@ import {HYDRATE} from 'next-redux-wrapper';
 
 // create your reducer
 const reducer = (state = {tick: 'init'}, action) => {
-    switch (action.type) {
-        case HYDRATE:
-            const stateDiff = diff(state, action.payload) as any;
-            const wasBumpedOnClient = stateDiff?.page?.[0]?.endsWith('X'); // or any other criteria
-            return {
-                ...state,
-                ...action.payload,
-                page: wasBumpedOnClient ? state.page : action.payload.page, // keep existing state or use hydrated
-            };
-        case 'TICK':
-            return {...state, tick: action.payload};
-        default:
-            return state;
-    }
+  switch (action.type) {
+    case HYDRATE:
+      const stateDiff = diff(state, action.payload) as any;
+      const wasBumpedOnClient = stateDiff?.page?.[0]?.endsWith('X'); // or any other criteria
+      return {
+        ...state,
+        ...action.payload,
+        page: wasBumpedOnClient ? state.page : action.payload.page, // keep existing state or use hydrated
+      };
+    case 'TICK':
+      return {...state, tick: action.payload};
+    default:
+      return state;
+  }
 };
 ```
 
@@ -431,35 +431,30 @@ import {State} from '../components/reducer';
 
 // Since you'll be passing more stuff to Page
 declare module 'next/dist/next-server/lib/utils' {
-    export interface NextPageContext {
-        store: Store<State>;
-    }
+  export interface NextPageContext {
+    store: Store<State>;
+  }
 }
 
 class MyApp extends App<AppInitialProps> {
+  public static getInitialProps = wrapper.getInitialAppProps(store => async context => {
+    store.dispatch({type: 'TOE', payload: 'was set in _app'});
 
-    public static getInitialProps = wrapper.getInitialAppProps(store => async context => {
-
-        store.dispatch({type: 'TOE', payload: 'was set in _app'});
-
-        return {
-            pageProps: {
-                // https://nextjs.org/docs/advanced-features/custom-app#caveats
-                ...(await App.getInitialProps(context)).pageProps,
-                // Some custom thing for all pages
-                pathname: ctx.pathname,
-            },
-        };
-
-    });
+    return {
+      pageProps: {
+        // https://nextjs.org/docs/advanced-features/custom-app#caveats
+        ...(await App.getInitialProps(context)).pageProps,
+        // Some custom thing for all pages
+        pathname: ctx.pathname,
+      },
+    };
+  });
 
-    public render() {
-        const {Component, pageProps} = this.props;
+  public render() {
+    const {Component, pageProps} = this.props;
 
-        return (
-            <Component {...pageProps} />
-        );
-    }
+    return <Component {...pageProps} />;
+  }
 }
 
 export default wrapper.withRedux(MyApp);
@@ -476,28 +471,24 @@ import App from 'next/app';
 import {wrapper} from '../components/store';
 
 class MyApp extends App {
-    static getInitialProps = wrapper.getInitialAppProps(store => async context => {
-
-        store.dispatch({type: 'TOE', payload: 'was set in _app'});
-
-        return {
-            pageProps: {
-                // https://nextjs.org/docs/advanced-features/custom-app#caveats
-                ...(await App.getInitialProps(context)).pageProps,
-                // Some custom thing for all pages
-                pathname: ctx.pathname,
-            },
-        };
+  static getInitialProps = wrapper.getInitialAppProps(store => async context => {
+    store.dispatch({type: 'TOE', payload: 'was set in _app'});
 
-    });
+    return {
+      pageProps: {
+        // https://nextjs.org/docs/advanced-features/custom-app#caveats
+        ...(await App.getInitialProps(context)).pageProps,
+        // Some custom thing for all pages
+        pathname: ctx.pathname,
+      },
+    };
+  });
 
-    render() {
-        const {Component, pageProps} = this.props;
+  render() {
+    const {Component, pageProps} = this.props;
 
-        return (
-            <Component {...pageProps} />
-        );
-    }
+    return <Component {...pageProps} />;
+  }
 }
 
 export default wrapper.withRedux(MyApp);

package.json

@@ -19,8 +19,8 @@
     "lint:staged": "lint-staged --debug"
   },
   "devDependencies": {
-    "eslint": "8.6.0",
-    "eslint-config-ringcentral-typescript": "7.0.1",
+    "eslint": "8.29.0",
+    "eslint-config-ringcentral-typescript": "7.0.3",
     "husky": "7.0.4",
     "lerna": "4.0.0",
     "lint-staged": "11.1.2",

packages/demo-page/src/components/store.tsx

@@ -6,8 +6,8 @@ import reducer, {State} from './reducer';
 export const makeStore = (context: Context) => {
     const store = createStore(reducer, applyMiddleware(logger));
 
-    if (module.hot) {
-        module.hot.accept('./reducer', () => {
+    if ((module as any).hot) {
+        (module as any).hot.accept('./reducer', () => {
             console.log('Replacing reducer');
             store.replaceReducer(require('./reducer').default);
         });

packages/demo-page/src/pages/_error.tsx

@@ -7,9 +7,7 @@ const ErrorPage = ({page}: any) => (
     <>
         <p>This is an error page, {page}.</p>
         <nav>
-            <Link href="/">
-                <a>Navigate to index</a>
-            </Link>
+            <Link href="/">Navigate to index</Link>
         </nav>
     </>
 );

packages/demo-page/src/pages/index.tsx

@@ -15,13 +15,9 @@ const Page: NextPage<ConnectedPageProps> = ({custom}) => {
     return (
         <div className="index">
             <pre>{JSON.stringify({page, custom}, null, 2)}</pre>
-            <Link href="/other">
-                <a>Navigate</a>
-            </Link>
+            <Link href="/other">Navigate</Link>
             {' | '}
-            <Link href="/error">
-                <a>Navigate to error</a>
-            </Link>
+            <Link href="/error">Navigate to error</Link>
         </div>
     );
 };

packages/demo-page/src/pages/other.tsx

@@ -24,12 +24,8 @@ const OtherPage: NextPage<State> = () => {
             <pre>{JSON.stringify({page}, null, 2)}</pre>
             <nav>
                 <button onClick={bump}>bump</button>
-                <Link href="/">
-                    <a>Navigate to index</a>
-                </Link>
-                <Link href="/other2">
-                    <a>Navigate to other 2</a>
-                </Link>
+                <Link href="/">Navigate to index</Link>
+                <Link href="/other2">Navigate to other 2</Link>
             </nav>
         </div>
     );

packages/demo-page/src/pages/other2.tsx

@@ -24,12 +24,8 @@ const OtherPage: NextPage<State> = () => {
             <pre>{JSON.stringify({page}, null, 2)}</pre>
             <nav>
                 <button onClick={bump}>bump</button>
-                <Link href="/">
-                    <a>Navigate to index</a>
-                </Link>
-                <Link href="/other">
-                    <a>Navigate to other</a>
-                </Link>
+                <Link href="/">Navigate to index</Link>
+                <Link href="/other">Navigate to other</Link>
             </nav>
         </div>
     );

packages/demo-page/src/pages/pageProps.tsx

@@ -10,9 +10,7 @@ const PropsPage: NextPage<State> = props => {
             <p>Using Next.js default prop in a wrapped component.</p>
             <pre>{JSON.stringify(props)}</pre>
             <nav>
-                <Link href="/">
-                    <a>Navigate to index</a>
-                </Link>
+                <Link href="/">Navigate to index</Link>
             </nav>
         </div>
     );

packages/demo-redux-toolkit/package.json

@@ -8,7 +8,7 @@
     "start": "next --port=6060"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.6.2",
+    "@reduxjs/toolkit": "1.8.6",
     "next-redux-wrapper": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",