Problem sharing redux state with server / server side rendering of HTML. #15017

Devalo · 2020-07-09T16:00:08Z

Devalo
Jul 9, 2020

I've been working on a problem for a couple of days. It's probably because I don't fully understand how it's supposed to work. I've tried googling but it doesn't seem like the answer is anywhere to be found. I'm using redux, redux-thunk and next-redux-wrapper. I'm choosing to use next-redux-wrapper because it should make it easy to synchronize the client and server.

All the entries are in the redux store. I need them to be available server side on the first request. I need to figure how to put the returned data from the reducer to the server as well. Or am I thinking about this all wrong? I am new to Next.js, though I know my way around a vanilla React.js app.

I've based most of the code on the official example https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper

And the official next-redux-wrapper example https://codesandbox.io/s/next-redux-wrapper-demo-7n2t5?file=/static.tsx

If I'm using getStaticProps or getServerSideProps makes no difference. I get the same output.

I'm really hoping anyone understands my problem, and are able to help me. It doesn't seem like I'm able go get any further as is. I was pretty impressed with Next.js and the server side rendering. This seems like a perfect way of using react within a framework.

I need the SEO. I either need to drop Next.js all together, or find another way to manage state, if this doesn't work. (but i'm sure there is an intuitive way, regarding how many big apps that are made with this framework :) )

If you take your time to have a look at this, Thanks!

Stephan Valois

index.js

import { useEffect } from 'react';
  import { useSelector, useDispatch } from 'react-redux';
import { exampleInitialize, testAction } from '../redux/reducers/exampleReducer';
import { wrapper } from '../redux/store';

const Home = (props) => {
  const dispatch = useDispatch();
  const entries = useSelector((state) => state.exampleStore);

  const anythingHere = useSelector((state) => state);

  // this only shows the prop passed from getStaticProps
  console.log(props);

  // this is pure client based, and initializes the store perfectly.
  useEffect(() => {
    dispatch(exampleInitialize());
  }, [dispatch]);

  // this only shows the exampleStore, nothing else is put in the store.
  console.log(anythingHere);

  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
      </Head>

      {props.getStaticProps}

      {entries.map((entry) => (
        <div id={entry.id}>
          {entry.value}
        </div>
      ))}
    </div>
  );
};

export const getStaticProps = wrapper.getStaticProps(({ store }) => {
  // None of these are triggering TEST
  store.dispatch({type: 'TEST', payload: 'directly from index'}); 
  store.dispatch(testAction);

  // This does not work either
  store.dispatch(exampleInitialize); //

  // This return statement is properly being passed to props
  return {
    props: {
      getStaticProps: 'This line is printed both in app and server console.',
    },
  };
});

export default Home;

Reducer with action

import exampleService from '../../fire-services/exampleService';

const exampleReducer = (state = [], action) => {
  console.log(action.type, action.data); 
  switch (action.type) {
    case 'INIT':
      return action.data;
    case 'TEST':
      return { ...state, ...action.payload };
    case 'NEW_ENTRY':
      return [...state, action.data];
    default:
      return state;
  }
};
// This works client side, not able to fetch this server side.
export const exampleInitialize = () => async (dispatch) => {
  const entries = await exampleService.getAll();
  dispatch({
    type: 'INIT',
    data: entries,
  });
};
// Can't manage to call this server side either
export const testAction = () => async (dispatch) => {
  dispatch({
    type: 'TEST',
    data: 'test from action',
  });
};

// This is only used client side.
export const createTest = (content) => {
  console.log('from reducer', content);
  return async (dispatch) => {
    await exampleService.create(content);
    dispatch({
      type: 'NEW_ENTRY',
      data: content,
    });
  };
};

export default exampleReducer;

getAll from exampleService. This is irrelevant to the problem, but I'm adding it anyway so you can read the whole program.

const getAll = async () => {
  const obj = [];
  const entry = fire.firestore().collection('example');
  const snapshot = await entry.get();
  snapshot.forEach((doc) => {
    obj.push({id: doc.id, ...doc.data()});
  });

  return obj;
};

_app.js This is taken directly from the official example

import { wrapper } from '../redux/store';

// eslint-disable-next-line react/prop-types
const WrappedApp = ({ Component, pageProps}) => {
  return <Component {...pageProps} />
}

export default wrapper.withRedux(WrappedApp)

store.js This is taken directly from the examples. It's kind of a mix between both, since I've tried multiple things to get it to work. I must say, it doesn't work with the pure examples either.

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { HYDRATE, createWrapper } from 'next-redux-wrapper';
import thunkMiddleware from 'redux-thunk';
import exampleReducer from './reducers/exampleReducer';

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

const combinedReducer = combineReducers({
  exampleStore: exampleReducer,
});

const reducer = (state, action) => {
  console.log(action.type)
  if (action.type === HYDRATE) {
    console.log(action.data)
    return { ...state, ...action.data };
  } if (action.type === 'TEST') {
    console.log('TEST was initiated');
    return { ...state, ...action.data };
  }
  return combinedReducer(state, action);
};

const initStore = () => createStore(reducer, bindMiddleware([thunkMiddleware]))

// eslint-disable-next-line import/prefer-default-export
export const wrapper = createWrapper(initStore);

illuminist · 2020-07-09T16:36:58Z

illuminist
Jul 9, 2020

You should use getInitialProps instead of getServerSideProps. The reason is redux doesn't sync its state with your server. So, if you use getInitialProps the server will create the redux with initial state, after user navigate through pages, sub-sequence getInitialProps will run in client side, which in turn it will dispatch an action to client's redux store.

2 replies

Devalo Jul 9, 2020
Author

Thanks! I still don't understand how I'm supposed to pass the redux store to the server though. Any pointers on that?

illuminist Jul 10, 2020

I have no idea either.

Redux store can be very large so that can be cumbersome to send the entire thing to server and then send it back again. But so far, I don't have any use of serverside redux nor I need to read client redux state in server; I only have redux in client for saving client config, app state, and storing fetched data.

Devalo · 2020-07-10T10:29:52Z

Devalo
Jul 10, 2020
Author

My main problem is, the client is working perfectly. I have no problem using the redux store with the client. But I need to be able to render the content in the store to the server side when a user first visits.

0 replies

illuminist · 2020-07-10T13:48:07Z

illuminist
Jul 10, 2020

I'm choosing to use next-redux-wrapper because it should make it easy to synchronize the client and server.

You probably misunderstood here. next-redux-wrapper doc doesn't mention anywhere about syncing client state to server. Moreover, when client gets more data from server, the state from server has to be manually merged with existing client state.

0 replies

Devalo · 2020-07-10T16:42:48Z

Devalo
Jul 10, 2020
Author

But isn't one of the mayor reasons to use Next.js to get server rendered HTML apps, which helps with SEO and such?

I am able to manually render server side with getServerSideProps(). if I fetch the data inside of the function, and return it as props. When I render the props in JSX, its visible in the HTML source code as well. But that's bypassing the redux store.

I am also able to use a redux store and render everything client side, vanilla react style, but that's not visible in the HTML source code.

When a user visits the page, (or refresh the page) the server needs to generate some data to show the user.

On a client side UI, I can just pull the stuff from the API with the help of my redux thunk action function, pass it to the reducer, which makes it available in the redux store. I can then use useSelector, and pull out the data I want.
It will display the data in the app, but this will not render any HTML.

I need to be able to render that initial API fetch as server side HTML, so that it will be available when for example the Google-bot visits my app.

In this case, having server rendered HTML for the bot is very important. The rest of the user-session can be client-side, but it needs to be able to fall back on that initial state, which is data fetched from an API, whenever a user enters or refreshes the page.

I've looked at the clock and counter examples, but I'm not able to turn it into something usable. No matter what I do, I always end up rendering it client side instead of server side.

How can I render it server side?

1 reply

illuminist Jul 11, 2020

The more I look into your code, more issues arose, you're having multiple of issues if not a dozens.

You're dispatching redux action, however in you getStaticProps(I assume you changed it to getServerSideProps), you called store.dispatch(exampleInitialize), here are the problems:
- exampleInitialize is a thunk action creator, so you're dispatching a wrong thing. Call the function exampleInitialize() to have it returns thunk action first.
- Now, store.dispatch(exampleInitialize()) is an async operation, so you have to await for its operation so the action works its way until finish. Otherwise the getServerSideProps will end and render the page before redux state gets updated.
- The final statement should be await store.dispatch(exampleInitialize())

Let's tackle those issues one by one slowly.

santhosh-umapathi-appymango · 2021-01-24T06:15:59Z

santhosh-umapathi-appymango
Jan 24, 2021

Even i got into the same issue of trying to use Redux store on Initial render and it does not work, I can make use of getStaticProps, but that is like bypassing redux and creating all logic of redux into getStaticProps which I don't want.

I wanted to dispatch a redux action before the static HTML is built and pass the store to the component

1 reply

AnhTuan4198 Sep 25, 2021

Incase use want to dispatch a redux action before the static HTML is build and pass the store. use can try like this

export const  getStaticProps = wrapper.getStaticProps( (store) => async () =>{
  await store.dispatch(queryBlogs());
  return{
      revalidate:config.PAGE_CONFIG.REVALIDATE,
  }
})

This guys explained very clear :
#15017 (reply in thread)

nbusuttil · 2021-02-04T22:02:42Z

nbusuttil
Feb 4, 2021

Hi, I don't know if it can help you, but I am doing redux actions from getServerSideProps

My _apps.js:

import { appWithTranslation } from '../i18n';
import { Provider, useStore } from 'react-redux';
import { wrapper } from '../src/store/store';
import { compose } from 'redux';
import { ConnectedRouter } from 'connected-next-router';

const MyApp = ({ Component, pageProps }) => {
    const store = useStore(pageProps.initialReduxState);

    return (
            <Provider store={store}>
                <ConnectedRouter>
                    <Layout>
                        ...
                    </Layout>
                </ConnectedRouter>
            </Provider>
    );
};

export default compose(
    wrapper.withRedux,
    appWithTranslation
)(MyApp);

Example of page :

const BlogPage = () => <div/>;

export const getServerSideProps = wrapper.getServerSideProps(async ({ store }) => {
    return {
      // it is not mandatory to cut like that especially, if you want to be able to use the redirect in case of failure
        props: {
            ...(await getGeneralParametersSSr(store)),
           ....(await anotherAction(store))
        },
    };
};

for more readability in my component, my action is separate :

export const getGeneralParametersSSr = async store => {
       const response = await fetch('url');

        const parameters = await response.json();
       // with store.dispatch,  my store will be hydrated with the result
        store.dispatch(setGeneralParameters(parameters));

        return { parameters };
};

and the last stage of my construction is in store.js

const combinedReducer = combineReducers({
    ...,
    generalParameters : generalParametersReducer
    router: routerReducer,
});

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

        if (typeof window !== 'undefined' && state.router) {
            // preserve router value on client side navigation
            nextState.router = state.router;
        }

        return nextState;
    } else {
        return combinedReducer(state, action);
    }
};

export const initStore = context => {
    const routerMiddleware = createRouterMiddleware();
    const { asPath } = context.ctx || Router.router || {};
    let initialState;
    if (asPath) {
        initialState = {
            router: initialRouterState(asPath),
        };
    }

    return createStore(reducer, initialState, bindMiddleware([thunkMiddleware, routerMiddleware]));
};

export const wrapper = createWrapper(initStore);

my approach may not be the best but it works :) if you have any feedback don't hesitate

0 replies

AlexandroMtzG · 2022-01-24T16:41:00Z

AlexandroMtzG
Jan 24, 2022

@Devalo did you solve it?

0 replies

romanown · 2024-01-09T06:54:28Z

romanown
Jan 9, 2024

can it for next 13.5?

0 replies

niteshsharma0304 · 2024-10-09T12:08:07Z

niteshsharma0304
Oct 9, 2024

I am using server side store and the same is being hydrated to the client side, the problem is we have to create a new store on each request, and its being retained by the server resulting in the server side memory leak. Anyone has any idea about that?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem sharing redux state with server / server side rendering of HTML. #15017

{{title}}

Replies: 9 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Problem sharing redux state with server / server side rendering of HTML. #15017

Replies: 9 comments · 4 replies

Devalo Jul 9, 2020 Author

Devalo Jul 10, 2020 Author

Devalo Jul 10, 2020 Author

Replies: 9 comments 4 replies

Devalo Jul 9, 2020
Author

Devalo
Jul 10, 2020
Author

Devalo
Jul 10, 2020
Author