API routes and getServerSideProps timeout on production (Vercel) #47237
-
SummaryRecently, without any changes nor new deployments besides upgrade to NextJS 13, API routes and SSG pages (with getServerSideProps) went dark. It throws a 504 timeout error, for both getServerSideProps functions and simple API routes from my functional components. Whether calls go through the API or not, it seems that any dynamic call that goes outsite of the app just throws a 504. This only occurs in production (both main and sandbox) - does not occur in Vercel throws this: Investigation on similar issues showed that it may be linked to different causes:
The console won't show me any details about the timeout. I'm not using the new NextJS architecture, and still rely on Project config: Help is much appreciated ! Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 17 replies
-
|
Hi, So you call your API routes from within
That's already a red flag for me. From within GSSP, you are already in an, specialized, API route (sort-of~~), so you should just get the data you need right here. Now, the FUNCTION_INVOCATION_TIMEOUT kicks in at 10 seconds without response. If it is the case that you are reaching to API routes from GSSP, then we are looking at debugging 2 round trips, instead of one. I'd say, use If your bundles are large, and slow to parse, for example a lot of JSON config files, etc, then your time budget would be:
Basically, downloading/parsing/compiling, but server side. Remember that these are all serverless lambdas, which have cold-starts. If you are reaching to API routes from GSSP, you are, at worst, paying this, times two, but not necessarily. Happy to bounce back ideas to get to the bottom of this. |
Beta Was this translation helpful? Give feedback.
-
|
Alright, but then the issue has to be something specific to the serverless deployment. More precisely, either it is falling into an infinite loop and never resolves, or there's an inherently slow request happening. What do these do? GSSP/API routes? Generally speaking, no need to be specific. Are you sure you've set all env vars properly on the Vercel dashboard? |
Beta Was this translation helpful? Give feedback.
-
|
Generally, GSSP fetches data from MongoDB for posts and articles in order to hydrate To show some basic examples of how it's written: export async function getServerSideProps({ params }) {
const clientPromise = await getClient()
const post = await clientPromise
.db(process.env.NEXT_PUBLIC_DATABASE_LABEL)
.collection("articles")
.findOne({ 'titleSlug': params.slug }, {projection: { "_id": 0 }})
if (post) {
const author = await clientPromise
.db(process.env.NEXT_PUBLIC_DATABASE_LABEL)
.collection("auteurs")
.findOne({ 'slug': post.authorSlug }, {projection: { "_id": 0 }})
await clientPromise.close()
return { props: { post: post, author: author}}
}
await clientPromise.close()
return { props: { error: true }}
}About the env variables, they didn't move an inch - still the same as my .env.local file, proving that it's not some weird MongoDB "I forgot your access key" thing. Need to mention that it occurs, throwing me a 504, even with some dumb API call like so: // /pages/api/dumb.js
export default async function handler(req, res) {
if(req.method !== 'GET') {
return
}
console.log("john doe")
res.status(200).json({})
} |
Beta Was this translation helpful? Give feedback.
-
|
And no redirect/rewrite logic is colliding? Have you got a top level API folder? I've seen something like this in this forum before, on my phone now, but maybe you can search around here. |
Beta Was this translation helpful? Give feedback.
-
|
No, I don't have any rewrite logic anywhere... My API folder is located in I'm going to investigate it further, but from what I saw, similar problems were restricted to either GSSP or API calls, not both 🤔 I'm wondering if this could be related to upgrading to Next 13 - maybe I've missed something? |
Beta Was this translation helpful? Give feedback.
-
|
Could it be related to my {
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@components/*": ["./components/*"],
"@context": ["./context"],
"@hooks": ["./hooks"],
"@layouts": ["./layouts"],
"@themes": ["./themes"]
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
I tried searching (again) for the solution within the discussions, but nothing has been answered yet:
This has recently been labelled as an issue (waiting for similarities confirmation) |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same problem. My app was working as expected three weeks ago, but then suddenly it just broke. Any api call to my own next endpoints takes +10s and returns 504 (and sometimes 502) errors, these calls also use a lot of memory, this includes too getServerSideProps. I got this error message in my production logs info - Loaded env from /var/task/.env |
Beta Was this translation helpful? Give feedback.
-
|
I GOT IT, I finally understood what was wrong, and it's vicious (and have nothing to do with Next itself, in my case). The issue came from Material UI, and specifically mui/icons-material. I mostly used tree-shaking to import icons in my components (i.e. The vicious thing is that, in order to "remove" this abomination, we have to remove every single tree-shaking import from @mui/icons-material from the project, because the bug happens at build time. You can still have icons, but have to import them directly like so: In my case, doing so made my builds go from 3-4mins. to merely 45seconds, and evaporated the bug. You won't be able to fix this if you don't remove every single tree-shaking from MUI icons. @Fasa2509 if you're not using MUI, maybe you should look into a bundle-analyzer like next-bundle-analyzer, or use a VSCode extension like "import size" (I don't remember the name) to watch for imports sizes in your files. I'll close the discussion with that, but feel free to reopen it if your situation looks similar enough for this to have an impact on debugging it! |
Beta Was this translation helpful? Give feedback.
-
|
It worked!!! Thanks for this |
Beta Was this translation helpful? Give feedback.
-
|
Thank you!! What an insane find! |
Beta Was this translation helpful? Give feedback.
-
|
Great job @Pardaramskha!!! Helped me solve. |
Beta Was this translation helpful? Give feedback.
-
|
This helped me! I had similiar issues with Phosphor Icons. |
Beta Was this translation helpful? Give feedback.
-
|
I spent the whole day banging my head into the wall. Thank you so much! |
Beta Was this translation helpful? Give feedback.
-
|
I am currently using React Tabler Icons ( |
Beta Was this translation helpful? Give feedback.
I GOT IT, I finally understood what was wrong, and it's vicious (and have nothing to do with Next itself, in my case).
The issue came from Material UI, and specifically mui/icons-material.
I mostly used tree-shaking to import icons in my components (i.e.
import {AddRounded, Delete} from "@mui/icons-material") but the thing is doing so multiplies bundle size and build time by 5 to 6.The vicious thing is that, in order to "remove" this abomination, we have to remove every single tree-shaking import from @mui/icons-material from the project, because the bug happens at build time. You can still have icons, but have to import them directly like so:
import AddRounded from "@mui/icons-material/…