Next.js：getServerSideProps开发正常生产环境报503，useSWR正常

你的getServerSideProps在Vercel生产环境返回503错误，但客户端useSWR正常工作，主要是以下几个核心原因导致：

1. 环境变量未正确配置 #

getServerSideProps在服务器端执行，依赖的process.env.CLIENT_URL需要在Vercel生产环境中正确配置：

• 登录Vercel控制台进入项目，在「Settings」→「Environment Variables」中添加CLIENT_URL，确保值为API的完整域名（比如https://your-api-domain.com）。
• 服务器端环境变量不需要NEXT_PUBLIC_前缀，但如果未配置或配置错误，会导致请求地址变成undefined/api/v1/...，直接触发503服务不可用错误。

2. API服务器的网络访问限制 #

如果你的API部署在有防火墙、IP白名单的环境中，Vercel的服务器端请求可能被拦截：

• 检查API服务器的安全规则，确认是否允许Vercel的服务器IP段访问。
• 本地用next start启动生产模式测试，模拟服务器端请求逻辑，看是否能复现503，以此区分是Vercel环境问题还是API自身限制。

3. 请求地址拼接语法错误 #

你代码中的请求地址存在模板字符串语法问题：

// 错误写法
const res = await axios.get(`${process.env.CLIENT_URL/api/v1/blogs/random`);

正确的拼接方式应该是将变量单独包裹在${}中：

// 正确写法
const res = await axios.get(`${process.env.CLIENT_URL}/api/v1/blogs/random`);

语法错误会导致请求地址解析异常，进而触发503错误。

4. API服务的生产状态异常 #

虽然客户端请求正常，但服务器端请求可能因API的缓存策略、过载限制等被拒绝：

• 查看API服务的生产环境日志，确认是否有来自Vercel服务器的请求被拦截的记录。
• 验证API服务在生产环境是否稳定运行，没有部署故障或资源过载情况。

内容的提问来源于stack exchange，提问作者adijsad