Next.js SSR vs SSG

1.0 Next.js SSR vs SSG

首先需要明确：您当前配置的是静态导出（SSG），而非 SSR。

2.0 SSG配置

// next.config.ts
const nextConfig: NextConfig = {
  output: 'export',  // 静态导出模式
  // basePath: '/out',      // 静态导出时的输出目录，如 wwww.exmaple.com/abc/
  // assetPrefix: '/public', // 静态资源前缀，如public/images/ic_index.jpeg
};

　　

// package.json
{
  "export": "next build && next export"
}

　　这套配置会将页面在构建时预渲染为静态 HTML 文件，适合内容不频繁变化的场景。

3.0 SSR 配置

若需要实时服务端渲染，应使用：

// next.config.ts
const nextConfig: NextConfig = {
  // 使用默认的 SSR 模式，无需 output: 'export'
  // 或使用 standalone 输出以优化部署
  output: 'standalone',
};

　　

// package.json
{
  "start": "next start"  // 启动 SSR 服务器
}

　　SSR 模式下，页面会在每次请求时通过 getServerSideProps（Pages Router）或 async 组件（App Router）实时获取数据并渲染。