Vercel: 504 timeout on serverless functions [2026 fix]
Serverless function exceeds 10s timeout or cold start stalls. Increase function timeout and optimize initialization code.
TL;DR
Cause: Your Vercel serverless function is hitting the default 10-second timeout (or your configured limit) due to slow initialization, external API calls, or database queries without timeouts.
Fix: Increase maxDuration in vercel.json to 60 seconds max, add explicit timeouts to external calls, and optimize cold start performance.
---
Real Console Error Messages
You'll see these exact errors in Vercel logs or your client:
``` Error: 504: GATEWAY_TIMEOUT The Serverless Function exceeded the maximum execution time of 10 ```
``` Failed to load resource: the server responded with a status of 504 (Gateway Timeout) Duration: 10003ms ```
``` vercel[api]: Serverless Function exceeded maximum size or timeout status code: 504 ```
``` Error: Task timed out after 10000ms at Timeout._onTimeout ```
``` X-Vercel-Id: sfo1::xyz123 status: 504 message: "DEADLINE_EXCEEDED" ```
---
Broken Code vs. Exact Fix
Problem 1: No Timeout Configuration
BROKEN: ```javascript // api/user.js - default 10s timeout import db from '@/lib/database';
export default async function handler(req, res) { // This could hang forever if DB is slow const user = await db.query('SELECT * FROM users WHERE id = ?', [req.query.id]); res.json(user); } ```
FIXED: ```javascript // api/user.js import db from '@/lib/database';
const query = async (sql, params, timeoutMs = 5000) => { return Promise.race([ db.query(sql, params), new Promise((_, reject) => setTimeout(() => reject(new Error('Query timeout')), timeoutMs) ) ]); };
export default async function handler(req, res) { try { const user = await query('SELECT * FROM users WHERE id = ?', [req.query.id], 8000); res.json(user); } catch (e) { res.status(500).json({ error: 'Database timeout' }); } }
// Add to vercel.json: // { "functions": { "api/user.js": { "maxDuration": 30 } } } ```
Problem 2: Cold Start + Heavy Imports
BROKEN: ```javascript // api/process.js import * as tensorflow from '@tensorflow/tfjs'; // 50MB+ library import heavy_ml_model from '@/models/model.pkl';
export default async function handler(req, res) { const result = await heavy_ml_model.predict(req.body); res.json(result); } ```
FIXED: ```javascript // api/process.js let model = null;
const loadModel = async () => { if (!model) { const tf = await import('@tensorflow/tfjs'); // Lazy load model = await import('@/models/model.pkl'); } return model; };
export default async function handler(req, res) { try { const model = await loadModel(); const result = await model.predict(req.body); res.json(result); } catch (e) { res.status(504).json({ error: 'Cold start timeout' }); } } ```
Add to vercel.json:
```json
{
"functions": {
"api/process.js": {
"maxDuration": 60,
"memory": 3008
}
}
}
```
Problem 3: Missing External API Timeouts
BROKEN: ```javascript // api/fetch-data.js import fetch from 'node-fetch';
export default async function handler(req, res) { // No timeout - waits forever if external API is down const response = await fetch('https://slow-api.example.com/data'); const data = await response.json(); res.json(data); } ```
FIXED: ```javascript // api/fetch-data.js export default async function handler(req, res) { const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), 5000); try { const response = await fetch('https://slow-api.example.com/data', { signal: controller.signal, timeout: 5000 }); const data = await response.json(); res.json(data); } catch (e) { if (e.name === 'AbortError') { res.status(504).json({ error: 'External API timeout' }); } else { res.status(500).json({ error: e.message }); } } finally { clearTimeout(timeout); } } ```
---
Configuration Details
Note on version behavior: As of 2026, Vercel's max function timeout is 60 seconds for Pro plans, 10 seconds for Hobby. Behavior may differ if you're on an older version—check your account tier in dashboard.
Where to add maxDuration:
1. vercel.json (recommended): ```json { "functions": { "api/**/*.js": { "maxDuration": 30 }, "api/heavy-process.js": { "maxDuration": 60, "memory": 3008 } } } ```
2. Edge function alternative (use instead if <15s is fine): ```javascript export const config = { runtime: 'edge', regions: ['sfo1'] }; ``` Edge functions don't timeout the same way but max 30s globally.
---
Still broken? Check these too
1. [Database connection pooling](/?guide=database-timeout) — Each connection takes ~2s; reuse them with connection pools (Prisma, pgBouncer).
2. [Cold start optimization](/?guide=vercel-cold-start) — Reduce bundle size; move node_modules to layers; use ESM tree-shaking.
3. Memory allocation mismatch — If memory is set too low, CPU is throttled. Increase to 3008MB for compute-heavy tasks.
---
Official Resources
Found a different variation? Drop it in the comments.