Vue SSR 服务器端渲染实现
了解 SSR 概念及在 Vue 中的实现方式
问题
什么是 SSR？如何在 Vue 中实现服务器端渲染？
解答
什么是 SSR
SSR（Server-Side Rendering，服务器端渲染）是在服务器上预先渲染应用界面并以 HTML 形式发送到客户端的技术。
传统的客户端渲染（CSR）中，浏览器下载 JavaScript 文件后在客户端执行代码来构建页面，初始加载时只是空壳。而 SSR 在服务器接收请求后，根据路由和数据预先生成完整的 HTML 页面，浏览器无需执行额外 JavaScript 即可直接展示内容。
SSR 的优势：
- 更快的首次渲染：用户打开页面时立即看到内容，无需等待 JavaScript 下载和执行
- 更好的 SEO：搜索引擎爬虫能够抓取完整的 HTML 页面并直接索引
- 更好的用户体验：减少白屏时间和加载等待
需要注意的是，SSR 会增加服务器负载和响应时间，并涉及路由、状态管理等复杂性，需要根据项目需求权衡利弊。
Vue 中实现 SSR
1. 安装依赖
确保项目中已安装 Vue、Vue Router、Vue Server Renderer 等依赖。
npm install vue vue-router vue-server-renderer express2. 创建服务器入口文件
创建 server.js 文件，引入必要模块并设置路由处理器：
const express = require('express');
const { createRenderer } = require('vue-server-renderer');
const Vue = require('vue');
const app = express();
const renderer = createRenderer();
app.get('*', (req, res) => {
// 服务器端渲染逻辑
});
app.listen(3000);3. 编写服务器端渲染逻辑
创建 Vue 实例并使用 renderer 渲染为字符串：
app.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>
<head><title>SSR Demo</title></head>
<body>${html}</body>
</html>
`);
});
});4. 处理静态资源
使用 Webpack 配置服务器端渲染，处理样式表、图片等静态资源的导出和加载。
5. 客户端激活
在 HTML 中插入脚本，使用 createApp 创建客户端应用实例以响应交互事件：
// client.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');关键点
- SSR 在服务器端生成完整 HTML，提升首屏渲染速度和 SEO 效果
- 需要创建服务器入口文件，使用 Vue Server Renderer 的
renderToString方法 - 使用 Webpack 处理静态资源的加载和引用
- 客户端需要激活 Vue 实例以支持交互功能
- SSR 会增加服务器负载，需根据实际需求选择使用
目录