Next Js ISR and SSR Serverless Functions Timing Out

  • Site Name: https://backstorytoday.netlify.app/
    Next Js Version: 12.0.8
    Node Js Version: 16 LTS
    Netlify Plugins: Essential Next.js (v4) [4.1.1] (added automatically when building the app)

Hi, I recently deployed a Next JS webapp (link provided above) but I am having troubles getting the SSR and ISR to work. On opening any page that uses ISR (ex: https://backstorytoday.netlify.app/) or SSR (ex: https://backstorytoday.netlify.app/today-in-history/tag/war), I receive an error like

{"errorMessage":"2022-01-16T16:47:42.443Z 2cd1eda0-f5ac-4453-b864-005a73f0d6ce Task timed out after 10.01 seconds"}

I initially thought that the issue is maybe related to me using firestore for fetching data inside the getStaticProps or getServerSideProps functions. Then i created 2 pages https://backstorytoday.netlify.app/no-data-fetch-isr and https://backstorytoday.netlify.app/no-data-fetch-ssr with ISR and SSR respectively with no computation whatsoever in the getStaticProps / getServerSideProps (just returning some hardcoded props) but that doesn’t seem to work also.
In the Serverless Function logs i receive logs like

10:04:07 PM: 0fd4bc4a Duration: 10009.78 ms	Memory Usage: 237 MB	10:04:07 PM: 0fd4bc4a ERROR  Task timed out after 10.01 seconds

No logs inside the getStaticProps / getServerSideProps are printing though.

Some static pages seem to work correctly though ex: About | BackStory

Please help me resolve this issue

Hi, any update ? I can’t resolve this issue and it has pretty much rendered the site useless

Hey there, @backstory :wave:

Sorry for the delay here, we have been a bit underwater this week. I took this to our team that works on the plugin, and they would like you to update to the latest version of the build plugin? There is a specific fix that went out that we believe will address this: Releases · netlify/netlify-plugin-nextjs · GitHub

Let us know how that goes!

Hi @hillary, thanks for the update. As per your suggestion I upgraded to the latest version of netlify-plugin-nextjs @4.2.0.
After the upgrade some pages, that were not previously getting timed out are loading properly now.
However, I got many timeouts untill about 20 minutes of the deployment, but once a page loaded, it loaded fine consistently.

Another issue i have been having is that images that I load dynamically from firebase cloud storage, ex: Massacre_de_Vassy_1562_print_by_Hogenberg_end_of_16th_century.jpg are not loading in the site.

This is what I see in the console:
Failed to load resource: the server responded with a status of 502 () https://backstorytoday.netlify.app/_ipx/w_3840,q_75/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fbackstory-today.appspot.com%2Fo%2Fbanner-image%2FMassacre_de_Vassy_1562_print_by_Hogenberg_end_of_16th_century.jpg%3Falt%3Dmedia?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fbackstory-today.appspot.com%2Fo%2Fbanner-image%2FMassacre_de_Vassy_1562_print_by_Hogenberg_end_of_16th_century.jpg%3Falt%3Dmedia%26token%3D7d179f44-152c-4aa7-afcf-2710efa70c1d&w=3840&q=75

I tried to reproduce this issue locally with netlify dev but everything is working fine there.

I checked that URL and got this:

Source image server responsed with 403 Forbidden

So, that could be an issue.

About the timeout issue, do you know which pages are having issues?

@hrishikesh for the image thanks, I fixed the firestore cloud storage read rules and it worked.

For the timeouts it is kind of inconsistent, some pages that were working earlier have suddenly stopped working. The wierdest being the 404 page https://backstorytoday.netlify.app/404 . This is a static page with no data being fetched at all. Another page that stopped working is this test page https://backstorytoday.netlify.app/no-data-fetch-ssr . This one is an SSR page with no data being fetched also.

This is my page build output section from the latest deployment

3:43:59 PM: ┌ ● / (ISR: 3600 Seconds) (892 ms)                            3.37 kB         247 kB
3:43:59 PM: ├   /_app                                                     0 B             230 kB
3:43:59 PM: ├ ○ /404 (509 ms)                                             579 B           230 kB
3:43:59 PM: ├ ○ /about (786 ms)                                           12.6 kB         242 kB
3:43:59 PM: ├ ○ /admin (430 ms)                                           2.26 kB         270 kB
3:43:59 PM: ├ ○ /admin/story (1687 ms)                                    292 B           634 kB
3:43:59 PM: ├ λ /admin/story/[slug]                                       357 B           634 kB
3:43:59 PM: ├ λ /admin/today-in-history/[slug]                            1.76 kB         256 kB
3:43:59 PM: ├ ● /no-data-fetch-isr (ISR: 3600 Seconds) (324 ms)           3.37 kB         247 kB
3:43:59 PM: ├ λ /no-data-fetch-ssr                                        3.37 kB         247 kB
3:43:59 PM: ├ ● /today-in-history (ISR: 3600 Seconds) (1168 ms)           2.65 kB         246 kB
3:43:59 PM: ├ ● /today-in-history/[slug]                                  571 B           255 kB
3:43:59 PM: ├ ● /today-in-history/featured (ISR: 3600 Seconds) (1098 ms)  2.64 kB         246 kB
3:43:59 PM: └ λ /today-in-history/tag/[tag]                               2.74 kB         246 kB
3:43:59 PM: + First Load JS shared by all                                 230 kB
3:43:59 PM:   ├ chunks/framework-dc33c0b5493501f0.js                      42 kB
3:43:59 PM:   ├ chunks/main-00ff8c798c1797de.js                           27 kB
3:43:59 PM:   ├ chunks/pages/_app-f072423944ad0e7e.js                     160 kB
3:43:59 PM:   ├ chunks/webpack-378e68e29c265886.js                        886 B
3:43:59 PM:   └ css/0a365afba29faf88.css                                  61 B
3:43:59 PM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
3:43:59 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
3:43:59 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
3:43:59 PM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)```

As you can see, the maximum build time is < 2 seconds so i don’t think there would be a real timeout (10s) issue from my end. Let me know if you need any other info.

Yes, the timeout is not from your end, but Netlify’s end. Next.js requires Netlify functions for some actions, and Netlify Functions have a run time limit of 10 seconds by default. That’s where the error is coming from.

I checked this further, and this is kind of weird. I’m not too well-versed with Next.js, so I might be wrong, but here is what I found:

According to those 2 lines, it makes me think that the 404 page is indeed a static page. So, it should exist as 404.html in your site. Except, it doesn’t.

Here are the few files I got from your deploy:

/build_id
/about.html
/admin.html
/build-manifest.json
/export-marker.json
/images-manifest.json
/netlify.toml
/next-server.js.nft.json
/prerender-manifest.json
/react-loadable-manifest.json
/required-server-files.json
/routes-manifest.json
/static-manifest.json
/trace
/admin/story.html

As you can see, for other static pages like /about, /admin, etc. there’s a page with [name].html in your deploy. There’s no such 404.html page.

The plugin has ended up adding a redirect rule for the 404 page:

/404 /.netlify/functions/___netlify-handler 200

So, 404 page is also sent to the function (in spite of Next.js saying that it’s a static page). Now, I don’t know if this is expected or not. I’ll try to ask the developers, but meanwhile if you could confirm if this is expected when using Next.js, that would be great.

Hi @hrishikesh, thanks for the update.

I found this article Why have a boring default error page when you can spruce it up? Next.js has a custom static 404 page built right into the framework. Here's how to use it. which mentions that the 404 page should have been statically generated.
However this article is old (> 1yr) and I could not find any source in the nextjs-build plugin github repo which points whether 404 page be statically generated or generated by a serverless functions.

The official Next Js docs also suggest that the error pages should be statically generated Advanced Features: Custom Error Page | Next.js

Hey @backstory,

Could we have a chance to take a look at your repo?

Hi @hrishikesh please access the repository at GitHub - PrinceGupta1999/BackStory-Web: Next JS app for BackStory Webapp

Hi @hrishikesh any update ? The site is still not working properly.

Hey @backstory,

Sorry about the delay. We tried to discuss this with our engineers today and they’ve some concerns about the stuff that’s happening with Firebase. Would you be able to add some log statements at each stage in your _app.tsx and _document.tsx to see where it might be taking time?

Hey @hrishikesh i added the logs as you suggested in this commit add logs · PrinceGupta1999/BackStory-Web@c87b5be · GitHub

The only log that i see in the server-less function console is

The next log that should have been visible according to my test on local is BackStory-Web/_app.tsx at main · PrinceGupta1999/BackStory-Web · GitHub

Now i am not sure why this is happening the _document.tsx that i have written is for enabling Material UI on server side and is copied from the official MUI repo. material-ui/_document.js at master · mui-org/material-ui · GitHub

Let me know if you need more info. Thanks in advance

PS: this is the log i see

10:47:15 PM: 9b35959d INFO   starting _document.tsx 2022-01-27T17:17:15.496Z
10:47:17 PM: dc83e07e Duration: 10005.94 ms	Memory Usage: 270 MB	Init Duration: 204.07 ms

PPS: i saw that netlify-plugin-next-js had an update available to v4.2.1 so i applied it also but no improvement

Hey @backstory,

Thank you for doing that testing. We’d discuss this with our engineers as soon as possible and revert. Sorry to be taking so long on this.

Hey @backstory

We had a talk with the engineers, but the reason for the timeout is not certain. There doesn’t seem to be any obvious cause there, so we’re at a loss to explain it.

About the image issue though, it’s a known issue that any image with the query parameter in the source URL will have the same issue. So, if you remove the query params from the source, it should work.

Hi @hrishikesh thanks for the update.

For the image issue I had already mentioned in one of my earlier replies that it was an issue with firestore cloud storage read rules and i was able to get it to work with the URL parameters.

But since the main issue is not resolved I guess I will have to maybe move the app to a proper Node JS Server runtime.

Thanks for your time and efforts.

A last try you could give is to try updating to version 4.2.4 of the plugin. It made some changes with ISR and a few users reported their issues being fixed with this change, so maybe you’re in luck too.

Hi @hrishikesh i updated the plugin to v4.2.4 but no luck.

In case it helps the bottleneck is time between starting _document.tsx and _app.tsx
When I deploy on NextJs (around a 30s difference)

12:42:16 PM: starting _document.tsx 2022-02-05T07:12:16.878Z
12:42:42 PM: starting _app.tsx 2022-02-05T07:12:42.172Z

But when I test on local (around 3s)

starting _document.tsx 2022-02-05T07:47:01.393Z
info  - Collecting page data .starting _app.tsx 2022-02-05T07:47:04.285Z

I would be moving away the app from netlify for now and look for other options but would love to come back if the issue gets fixed

Thanks for the help !