SSR 实战助你了解 Vue 服务端渲染精髓

2023-12-21 07:28:37

揭秘 Vue 服务端渲染 (SSR) 的神奇力量

什么是 Vue 服务端渲染？

Vue 服务端渲染 (SSR) 是一种巧妙的技术，它允许你在服务器上渲染你的 Vue 应用程序，而不是在客户端。这听起来可能有点技术性，但简单来说，这意味着当你访问一个使用 SSR 的网站时，服务器会提前生成页面，然后将这个预渲染的页面发送给你的浏览器。

SSR 的优势

SSR 拥有许多优势，包括：

闪现般的页面加载速度： 由于页面已经由服务器预先渲染，因此加载速度超快，尤其是在处理大量数据时。
卓越的 SEO： SSR 使搜索引擎更容易抓取和索引你的内容，提升你的网站在搜索结果中的排名。
增强的安全性： SSR 保护你的网站免受跨站脚本 (XSS) 攻击，因为 HTML 已在服务器端经过转义处理。

Vue SSR 实战

让我们动手来使用 Vue SSR 构建一个完整的应用程序。

1. 新建 Vue 项目

首先，使用以下命令创建一个新的 Vue 项目：

vue create ssr-app

2. 安装 Vue SSR 插件

接下来，安装 Vue SSR 插件：

npm install --save @vue/server-renderer

3. 配置 Vue SSR

在 vue.config.js 文件中，添加以下代码：

module.exports = {
  ...
  devServer: {
    ...
    render: {
      // 启用 SSR
      ssr: true
    }
  }
  ...
}

4. 创建服务器端入口文件

在项目目录中创建一个名为 server.js 的文件：

const express = require('express')
const app = express()

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

app.get('*', async (req, res) => {
  const context = { url: req.url }
  const html = await renderer.renderToString(require('./dist/main.js'), context)
  res.send(html)
})

app.listen(3000)