8

i am using Next.js version 8.0.4.

the problem i'm facing is that when i first build the app and start it is taking almost 150 Mb memory on server but it grows gradually over time and it becomes very big in just 3 or 4 days depending on how many users are visiting my website.

i have searched a lot about memory leaks and i don't think that i have done anything in my code that can cause a memory leak.

i also have noticed that this growth in using memory is happening whenever i refresh the page or when i load it for the first time, in fact when the page is rendering on the server side. with every refresh i'm seeing that memory goes up for 1-2 Mb and it won't be released

but when i am on the client side and i route to other pages on client side everything is fine.

i don't know what can cause this. i would appreciate it if someone could help me solve this problem.

https://i.stack.imgur.com/t4VDm.jpg

this is also my next.config.js if it helps: 


module.exports = withCss({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    },
    webpack(config, {dev, isServer}) {
        if (ANALYZE) {
            config.plugins.push(new BundleAnalyzerPlugin({
                analyzerMode: 'server',
                analyzerPort: isServer ? 8080 : 4000,
                openAnalyzer: true
            }))
        }
        config.plugins.push(new CompressionPlugin({
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8,
            cache: true,
            compressionOptions: {level: 1}
        }));

        config.optimization.minimizer = [new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i,
            cache: true,
            parallel: true,
            sourceMap: true,
            extractComments: 'all',
            uglifyOptions: {
                warnings: false,
                parse: {},
                compress: {},
                mangle: true,
                output: null,
                toplevel: false,
                nameCache: null,
                ie8: false,
                keep_fnames: false,
            }
        })];

        config.module.rules.push({
            test: /\.(svg|eot|otf|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    publicPath: './assets/fonts',
                    outputPath: 'static/fonts',
                    name: '[name].[ext]'
                }
            }
        });


        if (Array.isArray(config.optimization.minimizer)) {
            config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
        }



        if (!isServer && !dev) {
            config.optimization.splitChunks.cacheGroups.commons.minChunks = 2
        }
        return config
    },
});
niloofar mzr
  • 101
  • 1
  • 3
  • Despite it is not directly related to your question, the latest version of next is 9.2.1, why do you use 8.0.4? – wiesson Feb 15 '20 at 07:21
  • @wiesson i haven't updated yet because i've seen that some people have problems with next 9 that has not been fixed yet, but i am going to update soon. – niloofar mzr Feb 15 '20 at 07:25
  • Hard to tell, are all plugins up to date, do you use the latest nodejs version? – wiesson Feb 15 '20 at 07:31
  • @wiesson actually i have updated everything once just to see if the problem still exists and it didn't fix that. i think the problem might be somewhere else, that i am doing something wrong with configurations or something like that. – niloofar mzr Feb 15 '20 at 07:58
  • I would try to run nextjs without plugins and then add them one by one to see which one might increase the memory. From what you have posted here, it looks like https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config. – wiesson Feb 16 '20 at 07:33
  • @niloofarmzr did you find any possible solution? – Afsanefda Jan 25 '21 at 14:14
  • @Afsanefda yes actually i was able to find the memory leak using Apache Bench and load testing, i removed the components one by one and after each one i ran ab command and monitored the memory at the same time. it had nothing to do with nextjs. the problem was a higher order component that we were using and as it seemed it wasn't written correctly! if you have a memory leak problem i highly recommend using apache bench to see what happens when your code goes under a heavy load. https://httpd.apache.org/docs/2.4/programs/ab.html – niloofar mzr Apr 18 '21 at 06:00
  • @niloofarmzr II also used apache but since it was a huge one couldn't track correctly what was the issue. will try that more. – Afsanefda Apr 18 '21 at 09:12

0 Answers0