search

kirill-konshin / next-redux-wrapper

Redux wrapper for Next.js
MIT License
2.67k stars 265 forks source link

Increase of memory usage with migration Next-redux-wrapper V6 #334

Open tsaint31 opened 3 years ago

tsaint31 commented 3 years ago

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 = () => createStore(reducer, composeWithDevTools(applyMiddleware(reduxThunk)));

export const wrapper = createWrapper(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 = ({ 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 = () => ;

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

Capture d’écran 2021-03-24 à 09 40 27

after the migration the memory increase continuously

Capture d’écran 2021-03-24 à 09 39 38
fostyfost commented 3 years ago

what version of nextjs do you have? maybe you have a problem with this https://github.com/vercel/next.js/issues/23189

tsaint31 commented 3 years ago

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

fostyfost commented 3 years ago

Try 10.0.7

samueldelaporte commented 3 years ago

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

samueldelaporte commented 3 years ago

Try 10.0.7

We noticed this issue with next 10.0.3, 10.0.7 and 10.0.8

tkrotoff commented 3 years ago

@tsaint31 What tool do you use for the memory report?

samueldelaporte commented 3 years ago

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%)

samueldelaporte commented 3 years ago

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.

Capture d’écran 2021-03-24 à 14 06 00
kirill-konshin commented 3 years ago

Please try version 7.

samueldelaporte commented 3 years ago

We'll do ! And keep you posted. Thanks !

tsaint31 commented 3 years ago

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

Capture d’écran 2021-03-26 à 10 37 23

V6 on the left and V7 on the right in green

Capture d’écran 2021-03-26 à 10 34 13
ecrofeg commented 1 year ago

@tsaint31 @samueldelaporte Hi guys! Do you have any updates on this?

kumarsuresh1525 commented 1 year ago

Any update on this?