next-redux-wrapper
next-redux-wrapper copied to clipboard
kirill-konshin
Increase of memory usage with migration Next-redux-wrapper V6
Describe the bug
We see an increase of the memory usage on server after the migration from next-redux-wrapper V5 to V6
To Reproduce
Here are the store.ts :
import { MakeStore, createWrapper, HYDRATE } from 'next-redux-wrapper'; import { Action, applyMiddleware, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import reduxThunk from 'redux-thunk'; import { ReduxStoreType } from './src/reducers/model'; import rootReducer from './src/reducers/rootReducer';
const reducer = ( state: ReduxStoreType, action: { payload: ReduxStoreType } & Action, ) => { if (action.type === HYDRATE) { const { payload } = action; const nextState: ReduxStoreType = { ...state, }; if (payload.interaction !== null) nextState.interaction = payload.interaction; if (payload.termsOfUses !== null) nextState.termsOfUses = payload.termsOfUses; if (payload.interactionsData !== null) nextState.interactionsData = payload.interactionsData; if (payload.project !== null) nextState.project = payload.project; if (payload.heroSlides !== null) nextState.heroSlides = payload.heroSlides; return nextState; } else { return rootReducer(state, action); } };
export const makeStore: MakeStore<ReduxStoreType> = () => createStore(reducer, composeWithDevTools(applyMiddleware(reduxThunk)));
export const wrapper = createWrapper<ReduxStoreType>(makeStore, { debug: false, });
Here is our _app file import '@fortawesome/fontawesome-svg-core/styles.css'; import 'typeface-roboto'; import 'typeface-roboto-condensed'; import { AppProps } from 'next/app'; import Head from 'next/head'; import 'rc-slider/assets/index.css'; import React, { FC } from 'react'; import '../src/assets/scss/style.scss'; import ErrorDialog from '../src/components/commons/ErrorDialog/ErrorDialog'; import Layout from '../src/components/commons/Layout/Layout'; import PageLoader from '../src/components/commons/PageLoader/PageLoader'; import Header from '../src/components/Header/Header'; import { wrapper } from '../store';
const App: FC<AppProps> = ({ Component, pageProps }) => {
return (
<Layout
<Head
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
key="viewport"
/
</Head
<Header /
<Component {...pageProps} />
</Layout
<ErrorDialog /
<PageLoader /
);
};
export default wrapper.withRedux(App);
and the way we use the getServerSideProps const Announcements = () => <Announcement />;
export const getServerSideProps = wrapper.getServerSideProps( async ({ store, res, query, }: GetServerSidePropsContext & { store: Store }) => { return processDispatch( store.dispatch, apiInteractions.getInteraction(+query.id), getInteraction, getResponseData, ) }, );
Expected behavior
No increase of the memory.
Screenshots
Before migration
memory usage was stable
after the migration the memory increase continuously
what version of nextjs do you have? maybe you have a problem with this https://github.com/vercel/next.js/issues/23189
we have version "next": "^10.0.8" we already try an upgrade to "next": "^10.0.8-canary.11" but the increase of memory was worst so we rollback to 10.0.8
With the version 5 of next-redux-wrapper, the next/image component is not making such a fast increase. We noticed a huge change when migrate to next-redux-wrapper v6
Try 10.0.7
We noticed this issue with next 10.0.3, 10.0.7 and 10.0.8
It's print screens from our Grafana, which is monitoring our dockerized apps. In the worst case, the memory reached 1,75GB, and the CPU was busy (100%)
Here is some new data, if it can be usefull.
In purple : v5 increased from 15th to the 23th, where the curve is more or less flat.
The green curve is v6. It already exceeded the previous curve in less than 24h, and still increase (1,2 GB so far).
We already experienced that fast increase, and noticed that the curve usually reach almost 2GB in 48h, and force us to restart the container to free the memory.
With version 7.0.0-rc.1 we also see an increase of memory see the graph below.
We would like to implement the wrapper.getInitialPageProps to replace the getServerSideProps but we miss the locale value that was available with getServerSidePropd
Any idea how to get the locale value in getInitialPageProps
V6 on the left and V7 on the right in green
