如何解决Next.js生产环境主页默认SSG而非SSR的问题？

Pages Router（pages目录结构） #

在主页文件（pages/index.js/pages/index.tsx）中添加getServerSideProps函数，Next.js会自动将该页面设为SSR模式，不再进行静态生成。

示例代码：

// pages/index.js
export default function Home({ dynamicData }) {
  return <div>动态数据：{dynamicData}</div>;
}

// 强制启用SSR的核心函数
export async function getServerSideProps() {
  // 这里编写你的数据库查询逻辑
  const data = await fetchDatabaseData(); // 替换为实际的数据库查询方法

  return {
    props: { dynamicData: data },
  };
}

只要页面存在getServerSideProps，build时就不会静态生成该页面，每次用户请求都会在服务器端完成渲染并返回最新数据。

App Router（Next.js 13+，app目录结构） #

App Router默认采用静态渲染，要强制启用SSR，可通过以下两种方式：

方式一：添加动态渲染配置 #

在主页文件（app/page.js/app/page.tsx）顶部导出dynamic配置：

// app/page.js
// 强制页面每次请求都在服务器端渲染
export const dynamic = 'force-dynamic';

export default async function Home() {
  // 直接在服务器组件中编写数据库查询逻辑
  const dynamicData = await fetchDatabaseData();
  return <div>动态数据：{dynamicData}</div>;
}

方式二：禁用缓存 #

在数据请求时设置cache: 'no-store'，同样会触发SSR：

// app/page.js
export default async function Home() {
  // 通过no-store禁用缓存，强制每次请求获取最新数据
  const res = await fetch('/api/get-dynamic-data', { cache: 'no-store' });
  const dynamicData = await res.json();
  return <div>动态数据：{dynamicData}</div>;
}

关键排查点 #

• 检查主页文件是否存在getStaticProps（Pages Router）或generateStaticParams（App Router），这些函数会触发SSG，需移除或替换为SSR相关配置。
• 部署后可通过响应头x-nextjs-cache验证：SSR页面会返回MISS，SSG页面则返回HIT。

内容的提问来源于stack exchange，提问作者Yeslem Ahmed Najem