Next.js应用在Vercel生产环境不生成SSR HTML,本地开发正常求因
本地SSR正常但Vercel生产环境无SSR内容的原因排查
- 组件被强制设为客户端渲染:如果页面或根组件顶部加了
'use client'指令,Next.js 13(App Router)会将整个页面按客户端组件处理,Vercel生产环境不会生成SSR HTML。本地开发的热重载机制可能掩盖这个问题,检查页面文件开头是否有该指令,仅在需要交互的子组件中添加即可。 - 动态渲染配置错误:若页面设置了
export const dynamic = 'force-static'(App Router)或dynamic = 'force-static'(Pages Router),但实际依赖动态数据,Vercel会 fallback到客户端渲染。需要SSR的话,改为export const dynamic = 'force-dynamic'或保持默认的auto配置(App Router默认会自动判断)。 - Vercel缓存策略影响:Vercel的边缘缓存可能将静态页面缓存,导致看似没有SSR内容。可以在页面中添加
export const revalidate = 0禁用缓存,强制每次请求触发SSR,验证是否恢复正常。 - 构建环境依赖不一致:本地和Vercel的Next.js版本或其他依赖版本差异,可能导致生产构建时SSR失败。检查
package.json的Next.js版本,确保两端一致;同时查看Vercel构建日志,排查是否有数据获取函数执行失败等报错,这类错误会导致无法生成SSR HTML,转而使用客户端渲染。 - 数据获取方式错误:如果在客户端组件中使用
fetch未设置cache: 'no-store',或者在App Router中错误混用Pages Router的数据获取方法(比如getServerSideProps),可能导致生产环境无法生成SSR内容。确保服务器组件负责数据获取,客户端组件仅处理交互逻辑。
内容的提问来源于stack exchange,提问作者user2298124
相关产品推荐
相关产品推荐

