如何在Nuxt.js中结合使用静态渲染页与客户端渲染页

以下实现方式以主流的Nuxt3为例，Nuxt2逻辑基本一致，仅API写法有差异。

1. 渲染模式全局配置 #

你可以直接在nuxt.config.ts中通过routeRules规则批量指定不同路由的渲染模式，不用单独修改每个页面：

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 公共页面启用预渲染，构建时生成静态HTML文件
    '/home': { prerender: true },
    '/about': { prerender: true },
    // 如果公共页面有统一前缀，可通过通配符批量配置
    '/public/**': { prerender: true },

    // 登录后访问的私有路由关闭SSR，走纯客户端渲染
    '/dashboard/**': { ssr: false },
    '/user/**': { ssr: false },
  }
})

2. 单页面自定义渲染模式 #

如果路由没有统一规则，也可以在单页面文件中通过definePageMeta单独指定渲染模式：

<!-- 公共页面 pages/about.vue -->
<script setup>
// 开启预渲染，构建时生成静态资源
definePageMeta({
  prerender: true
})
</script>

<!-- 登录后私有页面 pages/dashboard/index.vue -->
<script setup>
// 关闭SSR，走客户端渲染
definePageMeta({
  ssr: false
})
</script>

3. 登录态与路由权限衔接 #

新增全局路由中间件处理登录态校验，避免未登录用户直接访问私有路由：

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware((to) => {
  // 替换为你实际的登录态判断逻辑，比如从cookie、pinia中取登录标识
  const hasLogin = !!useCookie('auth_token').value
  const isPrivateRoute = to.path.startsWith('/dashboard') || to.path.startsWith('/user')

  // 未登录访问私有路由，跳转到公共首页
  if (isPrivateRoute && !hasLogin) {
    return navigateTo('/home')
  }
})

4. 效果验证 #

• 公共页验证：执行nuxt build构建后，查看.output/public目录下是否生成了home.html、about.html对应的静态文件；浏览器访问公共页右键查看源代码，能看到完整的页面内容，说明静态渲染生效。
• 私有页验证：登录后访问私有路由，右键查看源代码仅能看到Nuxt基础启动代码，没有实际页面内容，说明客户端渲染生效。

注意：静态渲染的公共页面本身也支持客户端交互逻辑，不会影响登录按钮、跳转等功能的正常使用

内容的提问来源于stack exchange，提问作者Samy van Stokkum