Vue.js 中的服务端渲染（SSR）详解

2025-04-08 本文已影响0人 vvilkin

服务端渲染（Server-Side Rendering，SSR）是 Vue.js 中一种重要的渲染方式，它与传统的客户端渲染（CSR）有着显著的不同。

什么是服务端渲染？

服务端渲染是指在服务器端将 Vue 组件渲染为 HTML 字符串，然后将这些字符串直接发送到浏览器，最后在客户端"激活"这些静态标记，使其成为完全可交互的应用程序。

SSR 与 CSR 的区别

客户端渲染 (CSR):

浏览器下载空的 HTML 模板
下载 JavaScript 文件
执行 JavaScript 来渲染页面
内容在客户端动态生成

服务端渲染 (SSR):

服务器生成完整的 HTML 页面
浏览器直接接收渲染好的 HTML
JavaScript 在客户端"激活"页面
内容在服务端预先生成

Vue SSR 的优势

更好的 SEO：搜索引擎爬虫可以直接看到完全渲染的页面
更快的内容到达时间 (FCP)：用户能更快看到完整页面内容
对低性能设备更友好：减少客户端渲染负担
更好的用户体验：减少白屏时间

Vue SSR 的基本工作原理

服务器端：
- 创建 Vue 应用实例
- 渲染为 HTML 字符串
- 将状态 (store/router state) 嵌入到 HTML 中
客户端：
- 接收服务器渲染的 HTML
- 挂载 (mount) Vue 应用
- "激活"静态 HTML 使其可交互

Vue SSR 实现方式

1. 手动实现 SSR

// 服务器端代码
const Vue = require('vue')
const server = require('express')()

const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

2. 使用 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架，简化了 SSR 的实现：

# 创建 Nuxt 项目
npx create-nuxt-app my-project

Nuxt.js 提供了开箱即用的 SSR 支持，包括：

自动配置 Vue Router、Vuex、Vue Meta
自动代码分割
静态文件服务
预渲染

SSR 的注意事项

生命周期钩子：只有 beforeCreate 和 created 会在服务器端渲染过程中被调用
平台特定代码：避免在服务器渲染期间使用浏览器特有的全局变量
数据预取：需要在渲染前预先获取所有需要的数据
客户端激活：确保客户端和服务器端的输出完全一致
状态管理：需要处理服务器端和客户端之间的状态同步

SSR 的适用场景

SEO 是关键需求的项目
需要快速首屏渲染的展示型网站
网络条件较差的用户群体
需要更好的社交媒体分享体验

总结

Vue.js 的服务端渲染提供了更好的首屏性能和 SEO 支持，但同时也增加了项目的复杂度和服务器负载。在选择是否使用 SSR 时，需要根据项目需求权衡利弊。对于大多数项目，Nuxt.js 提供了最简单的方式来获得 SSR 的优势，而不必处理底层细节。