能否针对单个页面分别设置SSG和SSR渲染模式？

以下是主流前端框架的单页面独立配置方案，无需修改项目全局渲染配置：

Next.js #

App Router 版本 #

默认所有页面为SSG模式，如需单独切换为SSR，只需在对应页面文件顶部添加配置：

// app/[your-page]/page.tsx
export const dynamic = 'force-dynamic'

如需显式指定当前页面为SSG，可添加：

export const dynamic = 'force-static'

Pages Router 版本 #

无需额外全局配置，每个页面根据导出的异步函数自动匹配渲染模式：

• 导出getStaticProps：当前页面为SSG模式，构建时预生成静态资源
• 导出getServerSideProps：当前页面为SSR模式，每次请求时实时渲染

Nuxt.js 3 #

在对应页面的script块中通过definePageMeta单独配置渲染模式即可：

<!-- pages/[your-page].vue -->
<script setup>
definePageMeta({
  // 设为true开启当前页面SSR，设为false则为纯客户端渲染
  ssr: true,
  // 显式指定当前页面为SSG，构建时单独预生成静态HTML
  static: true
})
</script>

通用注意事项 #

• 单页面配置的渲染模式优先级高于全局配置，不同页面的渲染逻辑互不干扰
• 实时性要求高、包含用户个性化数据的页面建议配置为SSR，内容更新频率低的公开页面建议配置为SSG
• 大部分框架支持在页面级单独配置增量静态再生（ISR），可自定义静态页面的更新周期，平衡性能与内容时效性

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