Nuxt.js 混合渲染模式（部分静态化+部分动态渲染）

Nuxt.js 提供了灵活的混合渲染能力，允许开发者针对不同页面采用不同的渲染策略。以下是具体实现方式和相关语法：

一、不同页面的渲染策略

1. 静态生成（SSG）页面

适用场景：内容不经常变化的页面（如关于页、帮助文档、营销页）
生成时机 ：npm run generate 时预渲染
示例页面：
- 首页 (/)
- 产品介绍页 (/about)
- 博客列表页 (/blog)

2. 动态渲染（SSR）页面

适用场景：内容个性化或频繁更新的页面（如用户仪表盘、实时数据页）
渲染时机：每次请求时服务器实时渲染
示例页面：
- 用户个人中心 (/user/:id)
- 搜索结果页 (/search?q=keyword)
- 动态表单页 (/forms/:formId)

二、Nuxt.js 特定配置语法

1. 路由级配置（nuxt.config.js）

javascript 复制代码

export default {
  render: {
    // 全局配置静态资源缓存
    static: {
      maxAge: 1000 * 60 * 60 * 24 // 1天
    }
  },
  generate: {
    // 静态生成时排除特定路由
    exclude: [
      /^/dynamic/ // 排除所有/dynamic开头的路由
    ]
  }
}

2. 页面级配置（页面组件内）

静态页面（默认）

javascript 复制代码

// pages/static-page.vue
export default {
  // 无特殊配置即为静态生成
}

动态页面（通过函数声明）

javascript 复制代码

// pages/dynamic-page.vue
export default {
  // 声明为动态渲染（禁用静态生成）
  asyncData({ params }) {
    return { id: params.id }
  },
  // 或使用新版Composition API方式
  setup() {
    const route = useRoute()
    return { id: route.params.id }
  }
}

3. 混合路由参数（增量静态生成）

Nuxt 2.13+ 支持 ISG (Incremental Static Generation)：

javascript 复制代码

// nuxt.config.js
export default {
  target: 'static',
  generate: {
    fallback: '404.html',
    routes: [
      // 预生成静态页面
      '/static-page',
      // 动态路由的静态生成
      {
        route: '/products/:id',
        payload: {
          products: await fetch('/api/products').then(res => res.json())
        }
      }
    ]
  }
}

三、具体实现方式对比

方式	配置位置	语法示例	适用版本
全局路由排除	nuxt.config.js	`generate.exclude`	所有版本
页面级动态数据	页面组件	`asyncData()`/`fetch()`	所有版本
动态路由匹配	nuxt.config.js	`generate.routes` 动态函数	v2.10+
增量静态生成(ISG)	nuxt.config.js	`target: 'static'` + 动态路由	v2.13+
混合模式(hybrid)	页面组件+配置	`export const hybrid = true`	v2.14+

四、实际案例

案例1：博客系统

bash 复制代码

pages/
├── index.vue                # 静态生成
├── about.vue                # 静态生成
├── blog/
│   ├── index.vue            # 静态生成（文章列表）
│   └── _slug.vue            # 动态渲染（文章详情）
└── admin/
    └── dashboard.vue        # 动态渲染（需要认证）

案例2：电商网站

javascript 复制代码

// nuxt.config.js
export default {
  generate: {
    routes: [
      // 静态生成热门商品
      '/products/1',
      '/products/2',
      // 其他商品动态渲染
      ...function* () {
        for (let i = 3; i <= 100; i++) {
          yield `/products/${i}`
        }
      }
    ]
  }
}

五、注意事项

环境判断：

javascript 复制代码

if (process.server) {
  // 仅服务端执行的代码
}
if (process.client) {
  // 仅客户端执行的代码
}

数据获取差异：
- 静态生成：只在构建时获取数据
- 动态渲染：每次请求都获取最新数据
部署要求：
- 纯静态模式可部署到任何静态托管服务
- 混合模式需要支持 Node.js 的服务器

Nuxt.js 的这些特性不是 Vue 的通用写法，而是 Nuxt 框架特有的约定式配置，通过文件结构和特定属性名来实现混合渲染的智能判断。