SEO 百科

Nuxt

本页目录

Nuxt

Nuxt 是一套应用框架，它建立在 Vue 之上，默认开启服务端渲染，在服务器上把页面生成好再发给浏览器[1]。它解决的是同一个问题：Vue 默认在浏览器里渲染，抓取工具第一次请求看不到正文。Nuxt 把服务端渲染、静态生成和按路由的缓存策略都做成了配置。

框架定位与生态

Nuxt 官方把它描述成一套全栈网页应用框架，用 Vue.js 构建，并带有约定好的目录结构[1]。路由按文件目录生成，数据拉取、渲染和构建都有现成写法。

它在中文社区同样常见。做内容站、电商前台和企业官网时，常直接选 Nuxt，而不是自己给 Vue 拼一套服务端渲染。

默认渲染方式

Nuxt 默认使用通用渲染。官方说明，默认用通用渲染，是为了更好的用户体验、更好的性能，以及优化搜索引擎的索引[1]。

通用渲染的过程是这样：浏览器请求一个网址，Nuxt 在服务器环境里运行 Vue 代码，返回一个渲染完整的 HTML 页面，内容一开始就在页面里[1]。HTML 下载完之后，同一份 JavaScript 在浏览器里再跑一遍，把事件绑定上去，页面变得可交互[1]。这一步叫激活。

客户端渲染与服务端渲染的取舍

官方也承认服务端渲染有代价。一是开发受限，服务器和浏览器提供的接口不一样，代码要两边都能跑；二是成本，要有服务器持续运行，才能按请求实时渲染[1]。

反过来，官方把客户端渲染的好处也说清了：开发更快，托管更便宜，还能离线用。代价在性能和收录：索引和更新走客户端渲染的内容，比服务端渲染的 HTML 慢，抓取工具第一次索引时不会等界面完全渲染好[1]。Google 处理 JavaScript 网页，分成抓取、呈现、编入索引三个阶段[3]，客户端渲染的内容要等后两步才可能被读到。

要关掉服务端渲染，在配置里写一行即可：

export default defineNuxtConfig({
  ssr: false,
})

这时 Nuxt 会退回单页应用，抓取工具看到的又是空白的 HTML。官方建议，这类页面最好准备一个加载占位文件[1]。

混合渲染与预渲染

不同页面可以走不同的路子。Nuxt 用路由规则来做这件事，一条规则管一组地址[1]。

  • 首页这类固定内容可以预渲染，构建时生成静态文件。
  • 列表和详情页可以按需生成，在后台重新生成，缓存一段时间。
  • 后台管理这类不需要收录的页面，可以只走客户端渲染。

配置写成这样：

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/blog': { isr: 3600 },
    '/admin/**': { ssr: false },
  },
})

使用的代价

  • 要跑服务端。服务端渲染默认按请求现算，服务器压力比纯静态托管大。
  • 构建与部署更细。预渲染和增量更新各有条件，配置不对就会退化成客户端渲染。
  • 两边代码都要能跑。服务端要在 Node.js 环境里运行，没有 window 和 document，直接用会报错[2]。
  • 出错时页面空白。渲染过程报错，返回的可能是一个没有正文的页面。

常见误用

一个误用是以为选 Nuxt 默认就抓得到。它默认服务端渲染，但只要页面里那段内容是挂载之后才拉的，第一次请求还是看不到。

另一个误用是把后台也开着服务端渲染。这些页面不需要收录，白白占服务器资源，用路由规则关掉更划算。

还有一种是把 ssr: false 当万能开关。关掉之后，整站回到客户端渲染，内容站会丢掉最重要的一项优势。

附录

参见

参考资料

官方（境外）

  1. 《Rendering Modes》，Nuxt 官方文档。
  2. 《Server-Side Rendering (SSR)》，Vue.js 官方文档。
  3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-04 更新。

外部链接

无。