Build on Netlify takes too long until it timeouts

[netlify]

Build on Netlify takes too long until it timeouts

[FinnWoelm]

Hi @adamthewan,

Thanks for sharing these details! It looks like it's really the Netlify Functions (bundling and uploading to AWS lambda) that is slowing down the build.

Unfortunately, as far as I am aware, there is not much we can do on the next-on-netlify-side. next-on-netlify just wraps the Next.js page into a 2kB-handler to make it compatible with Netlify Functions.

Some questions/suggestions/ideas:

1. Are you using target: "experimental-serverless-trace" in next.config.js? If you don't have any npm packages that rely on binary code, it's better and faster to use target: "serverless". There is a way to do a hybrid approach, where you bundle only the binary dependencies and inline all others. Let me know if you're in this situation of having binary dependencies and you're using experimental-serverless-trace and the hybrid approach could be relevant.
2. Do you need all the dependencies that end up in the Netlify Function? If you open/extract some of your zipped functions, you can navigate to node_modules folder inside the zip file and sort by size to see which dependencies use up the most space. Perhaps there are some that you don't actually need for server-side rendering? If so, you can load them client-side only with Next.js' dynamic import — happy to share more, if relevant.
3. Do all of your routes need to be server-side rendered? Perhaps some of your pages can be pre-rendered using getStaticProps rather than getServerSideProps or getInitialProps. Any prerendered pages do not need a Netlify Function, so you'll reduce the build time.
4. If you don't necessarily mind the long build time or you are willing to live with it, I believe the Netlify team does have the power to increase the build timeout duration to at least 30 minutes. If you're on a paid plan, probably even longer. See here: https://community.netlify.com/t/extend-15min-max-build-time-to-30min/13033

Does that help? I'm sorry that there is no silver bullet, but hopefully you can shave at least some minutes off the build time this way. 🚀

[adamthewan]

Hey @FinnWoelm , thanks for the reply!

1. Yup I am using target: "experimental-serverless-trace". This is because I'm using firebase and for some reason runs into issues using target: "serverless".

2. This is a good suggestion. Just took a look, looks like the biggest files are:

@material-ui - 63.3mb
pose-core - 60.7mb (from react-pose)
next - 46mb
@firebase - 43.4mb

Will research more on how to make these packages imported dynamically with NextJS.

3. Agreed on this suggestion. Will look more into it. I believe this is a NextJS problem then.

4. Yup, we're on the paid plan. Have sent a message to Netlify customer service to increase it to 30 mins. However, we turn on auto-publishing for our production branch + 5 stage branches. Having our deployment time be 25 mins each wouldn't be scalable.

[adamthewan]

Hey @FinnWoelm , thanks for the suggestions. We're now dynamically loading a lot of our packages, and it seems to have made things better! The build time is now only 8 mins without cache, and about half once we have the build cache.

[FinnWoelm]

Great to hear that! 😊

Hopefully, there will be a hybrid serverless mode some day that inlines most dependencies, but allows to keep the dependencies with binaries separate. For example, there is no need to bundle 60MB of material-ui when you're only using a couple MUI components on the page. The standard serverless figures out what you are really using and inlines only that code. With experimental-serverless-trace, we end up bundling the entire library.

Let us know if you run into any other issues! Until then, happy hacking 🔥