NextJS动态组件设ssr:true仍未在SSR中渲染的问题

你遇到的核心误解是：.next/server/pages/RealContent.html只是构建阶段生成的模板文件，并非SSR的最终渲染结果。

关键区分：构建阶段 vs 运行阶段 #

• 如果你用的是getServerSideProps（真正的服务器端渲染）：
  next build只会生成页面的骨架模板，不会提前渲染RealContentComponent的内容。只有当你启动服务器（next start）并收到用户请求时，服务器才会实时加载并渲染RealContentComponent，返回包含实际内容的HTML。直接查看build后的静态文件看不到实际内容是正常的。
• 如果你用的是getStaticProps（静态生成）：
  理论上ssr: true会让Next.js在构建时预渲染组件内容到静态HTML里。如果此时还是只看到占位符，可能是这些原因：
  • 隐性客户端依赖：哪怕你以为组件没有客户端依赖，也可能间接用到了window/document这类仅客户端存在的API（比如某些第三方库的内部逻辑）。可以排查组件代码，或者尝试在组件顶部添加typeof window === 'undefined'的判断来规避。
  • 导出方式不匹配：dynamic默认导入的是组件的默认导出，如果RealContentComponent是命名导出，需要调整导入逻辑：

    const RealContent = dynamic(() => import('./RealContentComponent').then(mod => mod.RealContentComponent), {
      loading: () => <span>...placeholder Not Real Content...</span>,
      ssr: true,
    })
    

  • 版本兼容问题：部分旧版Next.js对dynamic的ssr: true处理存在bug，建议升级到最新稳定版后再测试。

验证方法 #

运行next start启动服务器，访问页面后右键查看页面源代码，此时就能看到RealContentComponent的实际渲染内容了——这才是SSR最终返回给用户的HTML。

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