服务端渲染（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 的优势，而不必处理底层细节。
网友评论