七、SPA单页面实现SEO优化之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'。

按钮现在可以交互了。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
古希腊数通小白(ip在学)3 小时前
stp拓扑变化分类
运维·服务器·网络·智能路由器
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js