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 express

2. 创建服务器入口文件

创建 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 会增加服务器负载，需根据实际需求选择使用