next.js doesn't server side render redux state (next-redux-wrapper) #16044

KostadinAlmishev · 2020-08-10T13:42:51Z

KostadinAlmishev
Aug 10, 2020

Describe the problem

I am using next-redux-wrapper to sync server redux state with client. After dispatching action in getServerSideProps, client state is updated and data is rendered. But with disabled js in the browser, the data is not rendered.

To Reproduce

store.js

import {applyMiddleware, createStore} from "redux";
import {composeWithDevTools} from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";
import rootReducer from "./reducers/rootReducer";
import {createWrapper, HYDRATE} from "next-redux-wrapper";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension')
    return composeWithDevTools(applyMiddleware(...middleware))
  }

  return applyMiddleware(...middleware)
}

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    return {
      ...state, // use previous state
      ...action.payload // apply delta from hydration
    };
  }

  return rootReducer(state, action);
}

const initStore = () => {
  const isServer = typeof window === 'undefined';
  if (isServer) {
    // If it's on server side, create a store
    return createStore(rootReducer, bindMiddleware([thunkMiddleware]));
  }
  const {persistStore, persistReducer} = require('redux-persist');
  const storage = require('redux-persist/lib/storage').default;

  const persistConfig = {
    key: "zonebeautyn",
    whitelist: ['categoryData'],
    storage
  };


  const persistedReducer = persistReducer(persistConfig, reducer);
  //const persistedReducer = persistReducer(persistConfig, reducer);
  const store = createStore(persistedReducer, bindMiddleware([thunkMiddleware])); // Create the store again

  store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature

  return store;
}

export const wrapper = createWrapper(initStore, {debug: true});

_app.js

import Head from "next/head";
import { useStore } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import "../assets/scss/styles.scss";
import {wrapper} from '../redux/store';

const MyApp = ({
  Component,
  pageProps
}) => {
  const store = useStore((state) => state);
  return (
    <>
      <Head>
        <title>...</title>
        <link rel="icon" href={process.env.PUBLIC_URL + "/favicon.ico"} />

      </Head>
          <PersistGate
            loading={<Component {...pageProps} />}
            persistor={store.__persistor}
          >
            <Component {...pageProps} />
          </PersistGate>
    </>
  );
}

export default wrapper.withRedux(MyApp)

page

const Shop = ({
  categories,
  brands,
//...
}) => {
   return (
   //...
)
};

export const getServerSideProps = wrapper.getServerSideProps(async ({store}) => {
    await store.dispatch(fetchAllBrands());
    await store.dispatch(fetchAllCategories());
  }
)

const mapDispatchToProps = dispatch => {
  return {
      //...
  }
}

const mapStateToProps = state => {
  return {
    categories: state.categoryData.categories,
    brands: state.brandData.brands,
//...
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Shop);

Expected behavior

After dispatching redux action in getServerSideProps, next should render fetched data in the server, but it is rendered on the client side after syncing storage.

Screenshots

with javascript enabled:

with javascript disabled:

enochndika · 2020-08-10T19:24:48Z

enochndika
Aug 10, 2020

remove redux-persist, it will work. redux-persist persists data with localStorage so when you add it your data will only be available on the client side

5 replies

KostadinAlmishev Aug 11, 2020
Author

This doesn't help. I removed redux-persist, but page is not server-side rendered with fetched data.

store.js

import {applyMiddleware, createStore} from "redux";
import {composeWithDevTools} from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";
import rootReducer from "./reducers/rootReducer";
import {createWrapper, HYDRATE} from "next-redux-wrapper";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension')
    return composeWithDevTools(applyMiddleware(...middleware))
  }

  return applyMiddleware(...middleware)
}

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    return {
      ...state, // use previous state
      ...action.payload // apply delta from hydration
    };
  }

  return rootReducer(state, action);
}

const initStore = () => {
  const isServer = typeof window === 'undefined';
  if (isServer) {
    // If it's on server side, create a store
    return createStore(rootReducer, bindMiddleware([thunkMiddleware]));
  }
  /*
  const {persistStore, persistReducer} = require('redux-persist');
  const storage = require('redux-persist/lib/storage').default;

  const persistConfig = {
    key: "zonebeautyn",
    whitelist: ['categoryData'],
    storage
  };


  const persistedReducer = persistReducer(persistConfig, reducer);
  const store = createStore(persistedReducer, bindMiddleware([thunkMiddleware])); // Create the store again
   */

  // const store = createStore(persistedReducer, bindMiddleware([thunkMiddleware]))
  const store = createStore(reducer, bindMiddleware([thunkMiddleware]))
  // store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature

  return store;
}

export const wrapper = createWrapper(initStore, {debug: true});

_app.js

import Head from "next/head";
import { useStore } from "react-redux";
// import { PersistGate } from "redux-persist/integration/react";
import "../assets/scss/styles.scss";
import {wrapper} from '../redux/store';

const MyApp = ({
  Component,
  pageProps
}) => {
  const store = useStore((state) => state);
  return (
    <>
      <Head>
        <title>...</title>
        <link rel="icon" href={process.env.PUBLIC_URL + "/favicon.ico"} />

      </Head>

        {/*
          <PersistGate
            loading={<Component {...pageProps} />}
            persistor={store.__persistor}
          >
            <Component {...pageProps} />
          </PersistGate>
          */
        }
        <Component {...pageProps} />
    </>
  );
}

export default wrapper.withRedux(MyApp)

enochndika Aug 11, 2020

Delete mapDispatchToProps and mapStateToProps, You don't need them because you are fetching your data from store in server side, that's why when you disable javascript your data is not server-side rendered.

update the getServerSideProps by this

export const getServerSideProps = wrapper.getServerSideProps(async ({store}) => {
    await store.dispatch(fetchAllBrands());
    await store.dispatch(fetchAllCategories());
    categories: store.getState().categoryData.categories;
    brands: store.getState().brandData.brands;

   return {
        props: {
           categories,
           brands
        }
    }
  }
)

i also reproduce sandbox with your exemple so you can see what's happening

KostadinAlmishev Aug 11, 2020
Author

I can't delete mapStateToProps and mapDispatchToProps, because I have another action, which are triggered by the client. For example fetchPageNumber 1, 2...

const mapDispatchToProps = dispatch => {
  return {
    fetchPage:                        bindActionCreators(fetchProductPage, dispatch),
    categoryFilterSetSelectCategory:  bindActionCreators(setCategorySelect, dispatch),
    brandFilterSetSelectBrand:        bindActionCreators(setBrandSelect, dispatch),
  }
}

const mapStateToProps = state => {
  return {
    categories: state.categoryData.categories,
    brands: state.brandData.brands,
    productPage: state.productData.productPage
  }
}

Also in inner components:

const mapStateToProps = (state) => {
  return {
    cartItems: state.cartData,
    wishlistItems: state.wishlistData,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (
      item,
      addToast,
      quantityCount,
      selectedProductColor,
      selectedProductSize
    ) => {
      dispatch(
        addToCart(
          item,
          addToast,
          quantityCount,
          selectedProductColor,
          selectedProductSize
        )
      );
    },
    addToWishlist: (item, addToast) => {
      dispatch(addToWishlist(item, addToast));
    },
    deleteFromWishlist: (item, addToast) => {
      dispatch(deleteFromWishlist(item, addToast));
    },
  };
};

Is there some kind of workaround?

enochndika Aug 11, 2020

so in that case just remove categories and brands on mapStateToProps and their actions on mapDispatchToProps

KostadinAlmishev Aug 11, 2020
Author

It's not that simple. I also have filtering for categories and brands. When I fetch them, I am adding another property selected. On every click on checkbox, I change the state of category's (or brand's) selected property

brandReducer.js :

onst initState = {
  brands: []
};

const brandReducer = (state = initState, action) => {
  if (action.type === BRAND_FETCH_ALL) {
    return {
      ...state,
      brands: action.payload.map(brand => {
        return {
          ...brand,
          selected: false
        }
      })
    };
  }

  if (action.type === BRAND_SET_SELECT) {
    return {
      ...state,
      brands: state.brands.map(brand => {
        if (brand.id === action.brandId) {
          return {
            ...brand,
            selected: action.selected
          };
        }
        return brand;
      })
    };
  }

    return state;
  };

The same is for categoryReducer

enochndika · 2020-08-11T20:07:29Z

enochndika
Aug 11, 2020

it's a bit tricky. i wanted to suggest you do everything on the client side but since it looks like an e-commerce app i guess you will need SEO for this page.

my suggestion would be to display the brand and categories on the server side and when the user clicks on the filter you can redirect to another page which will not use SSR, and you can request to fetch filters through queries which will be sent

1 reply

KostadinAlmishev Aug 12, 2020
Author

Ehh. Thank you. For now, I will not close the discussion.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

next.js doesn't server side render redux state (next-redux-wrapper) #16044

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

next.js doesn't server side render redux state (next-redux-wrapper) #16044

Uh oh!

Uh oh!

KostadinAlmishev Aug 10, 2020

Describe the problem

To Reproduce

Expected behavior

Screenshots

Replies: 2 comments · 6 replies

Uh oh!

enochndika Aug 10, 2020

Uh oh!

KostadinAlmishev Aug 11, 2020 Author

Uh oh!

enochndika Aug 11, 2020

Uh oh!

KostadinAlmishev Aug 11, 2020 Author

Uh oh!

enochndika Aug 11, 2020

Uh oh!

KostadinAlmishev Aug 11, 2020 Author

Uh oh!

enochndika Aug 11, 2020

Uh oh!

KostadinAlmishev Aug 12, 2020 Author

KostadinAlmishev
Aug 10, 2020

Replies: 2 comments 6 replies

enochndika
Aug 10, 2020

KostadinAlmishev Aug 11, 2020
Author

KostadinAlmishev Aug 11, 2020
Author

KostadinAlmishev Aug 11, 2020
Author

enochndika
Aug 11, 2020

KostadinAlmishev Aug 12, 2020
Author