如何在Next.js中禁用ASO（自动静态优化）以实现全页面SSR？

你完全可以禁用Next.js的预渲染功能，让所有页面始终以服务器端渲染（SSR）模式运行，这样自定义Document组件的getInitialProps就能稳定获取到req对象，解决预渲染页面ctx.req为undefined的问题。

Pages Router（传统页面路由）实现方式 #

在每个页面文件中显式导出getServerSideProps函数——只要这个函数存在，Next.js就会将该页面标记为SSR模式，不会进行预渲染。哪怕函数内部仅返回空props也可以：

// 示例：pages/about.tsx
export async function getServerSideProps() {
  return { props: {} };
}

export default function AboutPage() {
  return <div>About Us</div>;
}

如果页面数量较多，你可以通过封装高阶组件或者自动化脚本批量添加这个函数，避免重复编写。

App Router（Next.js 13+）实现方式 #

在app目录下的布局文件（layout.tsx）或页面文件中，导出dynamic配置并设置为'force-dynamic'，强制页面每次请求都在服务器端渲染：

// 示例：app/layout.tsx（全局生效，所有子页面继承）
export const dynamic = 'force-dynamic';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

如果只需要针对单个页面生效，直接在对应页面文件中添加上述导出即可。

注意事项 #

• 强制全SSR会牺牲静态页面的CDN缓存优势，每个请求都需要服务器实时渲染页面，可能会增加服务器负载并降低首屏加载速度，需要根据业务场景权衡性能需求。
• 若不想完全禁用预渲染，也可以考虑调整CSP nonce的实现逻辑：比如在预渲染页面时不插入依赖nonce的内联脚本，待客户端hydrate完成后再动态添加；不过这种方式复杂度较高，全SSR仍是最直接可靠的方案。

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