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

文章目录

    • 一、前言:
    • 二、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’。

按钮现在可以交互了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024 实训室建设:1+X 老年生活照护实训室

摘要&#xff1a;本文探讨了 2024 年 1X 老年生活照护实训室的建设意义、设计理念、功能布局以及对老年照护人才培养的积极作用&#xff0c;旨在为提升老年生活照护水平提供有力的实践教学支持。 随着我国老龄化进程的加速&#xff0c;对高质量老年生活照护的需求日益增长。202…

JAVA红黑树TreeMap/TreeSet详解

Java中的红黑树是一种自平衡的二叉查找树&#xff0c;它通过特定的旋转和重新着色操作来确保树的高度大致保持在对数级别&#xff0c;从而在平均和最坏情况下都能保证查找、插入、删除等操作的时间复杂度为O(log n)。红黑树通过遵循一系列的性质来维持其平衡&#xff1a; 红黑…

培训班和科班出生有什么区别

IT业的萌新来啦 每到毕业季 总有大量萌新走进职场 IT圈子的程序员 有的是科班出生 比如 计算机科学与技术、软件工程、大数据技术 有的是相关专业出生的 比如 信息安全、网络工程、物联网工程等等 除此之外 还有各种其他专业转行过来的 文理不限、专业不限 科班出生…

【在Linux世界中追寻伟大的One Piece】IO基础

目录 1 -> 回顾 1.1 -> 回顾C文件接口 1.2 -> 总结 2 -> 系统文件I/O 3 -> 接口介绍 3.1 -> open 3.2 -> open函数返回值 3.3 -> 文件描述符fd 4 -> 0 & 1 & 2 5 -> 文件描述符的分配规则 6 -> 重定向 7 -> 使用dup2系…

运维开发——局域网SSH访问服务器与应用

摘要 本博文主要介绍局域网SSH访问登陆虚拟机和及其应用相关配置操作。 1. 局域网SSH访问登陆虚拟机 目标&#xff1a;在局域网内A电脑使用SSH登陆B电脑上虚拟机的服务器。 前提条件:B电脑为宿主机&#xff0c;可以正常使用ssh访问虚拟机服务器&#xff0c;虚拟机网络连接方…

WPS宏实现表格合并功能

把文件夹中N个表格Sheet1页的数据合并成一个新的表格 function 合并表格() { //合并文件为C盘下面名为test的文件夹 var folderPath "C:\\test"; var fileName Dir(folderPath "\\*.*"); if(fileName ""){ ale…

不同关键字的原子性、可见性、有序性之间的比较

一、多线程中有三个非常重要的特性 1. 原子性 在一次或者多次操作时&#xff0c;要么所有操作都被执行&#xff0c;要么所有操作都不执行 2. 有序性 程序执行的顺序按照代码的先后顺序执行&#xff0c;没有进行优化和顺序调整。 为了提高程序的运行效率&#xff0c;Java可能在…

深度学习基础—超参数调试

1.超参数调试顺序 在训练深度网络最难的事情之一是超参数的选择&#xff0c;如何选择合适的超参数取值&#xff1f;下面我将谈谈&#xff0c;如下是我所理解的超参数调试顺序&#xff1a; 重要性排序 超参数 Top1梯队 学习率a Top2梯队 min-batch大小&#xff0c;隐层神经…

书籍字符串的统计字符串(5)0823

题目 给定一个字符串str&#xff0c;返回str的统计字符串&#xff0c;例如“aaabbadddffc”的统计字符串为“a_3_b_2_a_1_d_3_f_2_c_1"。 补充题目 给定一个字符串的统计字符串cstr&#xff0c;再给定一个整数index&#xff0c;返回cstr所代表的原始字符串上的第index个…

QT-五子棋游戏

QT-五子棋游戏 一、演示效果二、核心代码三、下载链接 一、演示效果 二、核心代码 #include "GameModel.h" #include <time.h> #include <stdlib.h>GameModel::GameModel(){}void GameModel::startGame(GameType type){gameType type;//初始化棋盤game…

uniapp/vue如何实现一个子表单及子表单作用

子表单是一个辅助表单或一个表&#xff0c;它允许在主表单中添加多个行式项目&#xff0c;以处理与主记录相关联的多个辅助项目或数据。子表单在多种应用场景中发挥着重要作用&#xff0c;特别是在需要处理一对多关系的数据时。 以下是对子表单的详细解析&#xff1a; 定义与特…

nvm安装node找不到版本问题(只有iojs)

&#x1f506; 背景 很久没有使用nvm新安装node版本了&#xff0c;今天在切换时执行 nvm install 要执行很久&#xff0c;然后返回暂无当前版本的错误信息&#xff0c;那就执行 nvm ls-remote 看一下远程的版本&#xff0c;发现返回的只有iojs的版本&#xff0c;没有node版本&…

90%的设计师都不知道的免抠图素材插件,水花免抠png素材轻松搞定!附保姆教程

你是否曾在设计中为绘制那些晶莹剔透的水花而苦恼&#xff1f;用PS太麻烦&#xff0c;细节根本抠不清楚&#xff1b;去素材网找&#xff0c;不是付费太高就是图案不满意&#xff01;可以试试千鹿设计助手的“AI免抠生成”插件&#xff0c;接下来我来分享一下我的一些使用过程和…

LeetCode 3133.数组最后一个元素的最小值:位运算+双指针

【LetMeFly】3133.数组最后一个元素的最小值&#xff1a;位运算双指针 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-array-end/ 给你两个整数 n 和 x 。你需要构造一个长度为 n 的 正整数 数组 nums &#xff0c;对于所有 0 < i < n - 1 &#xff0…

ardupilot开发 --- C嘎嘎 篇

长生不老&#xff1f;三界六道不就毁在这4个字上&#xff1f; 溜撒点一起上吧 cout和cin的使用&#xff0c;标准输入输出<< 和 >> 的使用数据类型&#xff08;函数&#xff09;模板的使用&#xff1a;命名空间的使用&#xff0c;std命名空间语句块new 的使用引用 &…

fiddler在软件测试中的使用(详细版)

1.抓包&#xff0c;辅助定位bug&#xff08;web中类似谷歌浏览器F12开发调试工具&#xff09; 合格的软件测试工程师&#xff0c;不仅仅需要能够发现bug&#xff0c;还需要能透过bug表象&#xff0c;分析出问题根本原因&#xff0c;从而提升bug的解决效率&#xff0c;通过fidd…

微信小程序记录(持续更新)

1.登录相关 登录简单来说就是用uni.login获取登陆凭证code。然后调用后台登录接口传递给后台&#xff0c;后台解码再返回token等一系列信息给前端 参考地址&#xff1a; 微信小程序获取用户手机号码教程&#xff08;前端后端&#xff09;_微信小程序获取手机号-CSDN博客 代码…

【pytorch】固定(freeze)住部分网络

https://blog.csdn.net/jningwei/article/details/120300014 如果使用过了FSDP架构&#xff0c;需要使用pytorch2.0以上的版本。 use_orig_paramstrue ignored_parameters[param for param in model.parameters() if not param.requires_grad] # 如果是2.1.0以上版本&#xf…

Qt音视频处理类有这些

Qt 提供了一系列音视频处理的类&#xff0c;这些类可以帮助开发者实现音视频的播放、录制、编解码等功能。以下是 Qt 中一些主要的音视频类&#xff1a; QMediaPlayer: 用于播放音频和视频的类&#xff0c;支持多种媒体格式&#xff0c;可以控制播放、暂停、停止等基本操作 。…

手机使用技巧:如何恢复Android手机不见的短信

在您的 Android 手机上丢失短信可能是一种令人沮丧的经历&#xff0c;尤其是在文本包含重要信息的情况下。幸运的是&#xff0c;有一些方法可以在Android上恢复已删除的短信。在这篇博文中&#xff0c;我们将讨论几种在Android手机上恢复已删除短信的方法。 为什么需要恢复Andr…