如何实现Nuxt.js SSR与部分页面静态预渲染的混合开发模式

方案核心逻辑：Nuxt原生支持部分路由预渲染+其余路由走SSR的混合模式，你的产品详情页预渲染需求无需复杂二次开发，直接通过内置配置即可实现，你提到的中间件方案属于更灵活的进阶实现，两种方案都给出可直接复用的操作步骤：

一、配置式预渲染方案（推荐，适配你的需求） #

Nuxt 3 操作步骤 #

• 把你10MB的产品JSON文件放到项目根目录的/public文件夹下，确保构建阶段可以正常读取
• 修改nuxt.config.ts配置，指定需要预渲染的产品详情页路由：

// nuxt.config.ts
import products from './public/products.json' assert { type: 'json' }

export default defineNuxtConfig({
  ssr: true, // 全局开启SSR
  nitro: {
    prerender: {
      // 自动生成所有产品详情页的静态HTML，假设详情页路由规则为/product/[产品id]
      routes: products.map(item => `/product/${item.id}`)
    }
  }
})

• 执行构建命令npm run build，构建完成后所有配置的产品详情页都会生成独立的静态HTML文件，用户访问时直接返回静态资源，其余未配置的路由仍然走正常SSR逻辑

Nuxt 2 操作步骤 #

• 将产品JSON文件放在项目根目录的/static文件夹下
• 修改nuxt.config.js配置：

// nuxt.config.js
const products = require('./static/products.json')

export default {
  ssr: true,
  target: 'server',
  generate: {
    // 配置预渲染的产品详情页路由
    routes: products.map(item => `/product/${item.id}`)
  }
}

• 执行npm run build构建后部署即可，效果和Nuxt3一致

二、中间件控制方案（就是你提到的帖子里的灵活方案） #

如果需要运行时动态判断哪些路由走静态模式，不需要提前全量生成静态路由，可以用中间件实现，以下是Nuxt3示例：

1. 新建/middleware/static-control.ts文件

export default defineNuxtRouteMiddleware((to, event) => {
  // 匹配所有产品详情页路由
  if (to.path.startsWith('/product/')) {
    // 强制当前路由走静态缓存逻辑
    setResponseHeaders(event, {
      'Cache-Control': 's-maxage=31536000, stale-while-revalidate'
    })
    event.context.nitro.static = true
  }
})

2. 在nuxt.config.ts中注册该全局中间件即可，匹配到的路由会自动走静态渲染逻辑，其余路由正常走SSR

注意事项 #

• 10MB的产品JSON在构建阶段读取完全无压力，不会拖慢构建速度
• 如果后续产品数据更新，重新执行一次构建命令就能生成最新的静态详情页，不会影响其余SSR路由的正常运行
• 如果需要不重启服务更新静态路由，可以搭配Nuxt内置的ISR增量静态再生功能，给指定路由配置缓存更新周期即可

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