当前位置：首页 > news >正文

七、SPA单页面实现SEO优化之SSR服务器渲染

news 来源：原创 2024/9/20 11:33:12

文章目录

- 一、前言：
- 二、SSR基本操作步骤

一、前言：

关于SPA和SEO优化、SSR服务器渲染的介绍可以参考这里：
六、什么是SEO优化（搜索引擎优化）？SPA单页面应用如何实现SEO优化？

通过上一篇文章可以了解到，Vue SPA单页面应用对SEO不友好，但是也有相应的解决方案。我了解到的SEO的实现方式有以下几种：
1.SSR服务器渲染；
2.静态化；
3.预渲染prerender-spa-plugin；
4.使用Phantomjs针对爬虫做处理。

其中SSR服务器渲染适用于构建大型网站，如商城类。如果是个人博客或者公司官网之类小型的网站，除SSR服务器渲染的其它方式都可以。如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，建议使用Phantomjs。因为SSR服务器渲染存在一些坑点（主要是开发中会遇到许多坑点）：

1.一套代码两套执行环境，会引起各种问题，比如服务端没有window、document对象，处理方式是增加判断。
2.因为没有任何动态更新，所以像 onMounted 或者 onUpdated 这样的生命周期钩子不会在 SSR 期间被调用，而只会在客户端运行。
3.Nuxt asyncData方法，初始化页面前先得到数据，但仅限于页面组件调用。
除此之外，开发中还会有很多代码细节需要调整，对于已经开发好的Vue单页面应用，十分不友好，SEO难度过大，必须要在一开始就定义好各种开发规范。

二、SSR基本操作步骤

应用渲染
让我们来看一个 Vue SSR 最基础的实战示例

1.创建一个新的文件夹，cd 进入
执行 npm init -y

2.在 package.json 中添加 “type”: “module” 使 Node.js 以 ES modules mode 运行

3.执行 npm install vue
创建一个 example.js 文件：

// 此文件运行在 Node.js 服务器上
import { createSSRApp } from 'vue'
// Vue 的服务端渲染 API 位于 `vue/server-renderer` 路径下
import { renderToString } from 'vue/server-renderer'const app = createSSRApp({data: () => ({ count: 1 }),template: `<button @click="count++">{{ count }}</button>`
})renderToString(app).then((html) => {console.log(html)
})

然后接着运行：

> node example.js

它应该会在命令行中打印出如下内容：

<button>1</button>

renderToString() 接收一个 Vue 应用实例作为参数，返回一个 Promise，当 Promise resolve 时得到应用渲染的 HTML。当然你也可以使用 Node.js Stream API 或者 Web Streams API 来执行流式渲染。查看 SSR API 参考获取完整的相关细节。

然后我们可以把 Vue SSR 的代码移动到一个服务器请求处理函数里，它将应用的 HTML 片段包装为完整的页面 HTML。接下来的几步我们将会使用 express.

执行 npm install express
创建下面的 server.js 文件：

import express from 'express'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'const server = express()server.get('/', (req, res) => {const app = createSSRApp({data: () => ({ count: 1 }),template: `<button @click="count++">{{ count }}</button>`})renderToString(app).then((html) => {res.send(`<!DOCTYPE html><html><head><title>Vue SSR Example</title></head><body><div id="app">${html}</div></body></html>`)})
})server.listen(3000, () => {console.log('ready')
})

最后，执行 node server.js，访问 http://localhost:3000。就看到页面中的按钮了。

客户端激活
如果你点击该按钮，你会发现数字并没有改变。这段 HTML 在客户端是完全静态的，因为我们没有在浏览器中加载 Vue。

为了使客户端的应用可交互，Vue 需要执行一个激活步骤。在激活过程中，Vue 会创建一个与服务端完全相同的应用实例，然后将每个组件与它应该控制的 DOM 节点相匹配，并添加 DOM 事件监听器。

为了在激活模式下挂载应用，我们应该使用 createSSRApp() 而不是 createApp()：

// 该文件运行在浏览器中
import { createSSRApp } from 'vue'const app = createSSRApp({// ...和服务端完全一致的应用实例
})// 在客户端挂载一个 SSR 应用时会假定
// HTML 是预渲染的，然后执行激活过程，
// 而不是挂载新的 DOM 节点
app.mount('#app')

代码结构
想想我们该如何在客户端复用服务端的应用实现。这时我们就需要开始考虑 SSR 应用中的代码结构了——我们如何在服务器和客户端之间共享相同的应用代码呢？

这里我们将演示最基础的设置。首先，让我们将应用的创建逻辑拆分到一个单独的文件 app.js 中。

// app.js (在服务器和客户端之间共享)
import { createSSRApp } from 'vue'export function createApp() {return createSSRApp({data: () => ({ count: 1 }),template: `<button @click="count++">{{ count }}</button>`})
}

该文件及其依赖项在服务器和客户端之间共享——我们称它们为通用代码。编写通用代码时有一些注意事项，我们将在下面讨论。

我们在客户端入口导入通用代码，创建应用并执行挂载：

// client.js
import { createApp } from './app.js'createApp().mount('#app')

服务器在请求处理函数中使用相同的应用创建逻辑：

// server.js (不相关的代码省略)
import { createApp } from './app.js'server.get('/', (req, res) => {const app = createApp()renderToString(app).then(html => {// ...})
})

此外，为了在浏览器中加载客户端文件，我们还需要：

1.在 server.js 中添加 server.use(express.static(‘.’)) 来托管客户端文件。

2.将添加到 HTML 外壳以加载客户端入口文件。

3.通过在 HTML 外壳中添加 Import Map 以支持在浏览器中使用 import * from ‘vue’。

按钮现在可以交互了。