502 on static homepage load with Next.js

Support Build Plugins
1

Hi,
I am working on this website in which I’m using Next.js. It is connected with WP API (WPGraphql).
I only have one API query to WP fetching some products in getStaticProps. The other sections that are loading are using axios library, which probably runs after the page is loaded and populate the page more.

After deploying the app on Netlify, the page sometimes gives a 502 timeout error. The thing I don’t understand is that the page is probably now static, with no DB query after the build, isn’t that right?
If it is, then why there is a timeout (>10s) on page load? And even with a DB query, 10s are way more than to appear. I just need help to debug this issue. The page loads under 3s on localhost.

Information to Check/Debug:
URL: https://eager-brown-e195b6.netlify.app/
x-nf-request-id: b021138d-670e-4997-a35a-c69c7b70b301
Error Message: {"errorMessage":"2021-06-18T20:24:16.569Z af6ff31d-5263-46d6-9552-c2ce1cee4019 Task timed out after 10.01 seconds"}

2

Hi @MTayyabHanif

Welcome to the Netlify community.

It would appear your site is not completely static based on the number of calls to JSON files (all with 502 status) in the console and the blank placeholders. You are (it would seem) loading data such as Top Tablets Comparison client-side rather than rendering it on the server.

1 Like