一步一步搭建 Vue2 SSR 的工程

前端

2024-01-01 10:21:55

服务器端渲染 (SSR) 和 Vue.js：提升用户体验和 SEO

什么是服务器端渲染？

随着单页应用 (SPA) 的兴起，前端开发领域出现了重大转变。SPA 提供了卓越的用户体验，但它们在 SEO 和首次加载速度方面存在一些局限性。服务器端渲染 (SSR) 应运而生，旨在解决这些问题。

SSR 是一种技术，可将 Vue.js 组件预渲染为 HTML，然后在浏览器中直接显示。这种方法加快了首次加载速度，同时使搜索引擎能够更轻松地抓取和索引页面，从而提高 SEO 排名。

搭建 SSR 环境

要开始使用 SSR，需要先搭建必要的环境。这包括安装 Node.js、npm 和 Vue CLI。然后，使用 Vue CLI 创建一个新项目，并安装 vue-server-renderer 包。

配置项目

接下来，需要在 Vue.config.js 和 server.js 文件中进行一些配置。在 Vue.config.js 中，需要指定 SSR 渲染器，而在 server.js 中，需要创建 Express 服务器并设置 SSR 路由。

实现 SSR

现在，可以创建 Vue.js 组件并将其渲染成 HTML。只需创建一个 .vue 文件，添加组件逻辑，然后在 server.js 文件中使用 renderer.renderToString() 方法渲染组件。

代码示例

以下是一个使用 Vue.js 和 SSR 的简单代码示例：

// App.vue
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

// server.js
const express = require('express')
const app = express()

const { createRenderer } = require('vue-server-renderer')
const renderer = createRenderer()

app.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(App, context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }

    res.end(html)
  })
})

app.listen(3000)