Two initialState passed to client when using _app.tsx + getServerSideProps

[ssolders]

Is your feature request related to a problem? Please describe.

In our app we have a custom app (_app.tsx) where we fetch some basic data needed across the site in getInitialProps.
Still inside getInitialProps, the data is then dispatched to redux. fInally we return props to the client.

On some pages we need to fetch additional data, we do that using getServerSideProps and dispatching to redux there too.

We've started seeing warnings in our logs on those pages:

Warning: data for page {MY PAGE} (path "/my-page") is 193 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

After some investigation and looking at JSON.parse(document.getElementById("__NEXT_DATA__").text); we found that initialData from both _app.tsx and the {page} is returned to the client, causing the warning above.

We realise this is due to both _app.tsx and each {page} having it's own version of the store-state, but is it by design that both are passed to the client and not merged server side and then passed down to client?

If so, what's the suggestion approach? Guessing this is a quite common issue?

Describe the solution you'd like

Ideally a single store object (initialState) would be passed to the client for hydration.

Describe alternatives you've considered

I guess we could get around this by only fetching data in each {page} and then doing the actual redux dispatch client side, since we only get the _app.tsx store passed as initialState if we remove the wrapper.getServerSideProps.

But doing the dispatch serverside saves a lot of headaches, would love to avoid jumpy-behaviour when data is set / spinners.

Additional context

Have tried using both v7.X and 8.1.0 of next-redux-wrapper.

We're using Next 12.3.1

Thanks for a great lib! 👍

[madmed88]

I noticed the same issue too. Is there a workaround to get rid of the extra initialState from the page props?