- 作者：老汪软件技巧
- 发表时间：2024-09-18 15:02
- 浏览量：
什么是服务器端渲染
服务器端渲染简称SSR(Server-Side Rendering),它是一种Web开发技术,它允许在服务端生成完整的HTML页面,并将其发送给客户端浏览器.
SEO问题
SEO(Search Engine Optimization)也就是搜索引擎优化.对于单页应用来说,由于其自身独特的结构通常会出现一些问题导致我们需要优化SEO,比如传统的搜索引擎爬虫主要是基于爬取静态的HTML页面,爬虫可能不会执行JavaScript代码来解析动态内容，这就会导致单页应用的内容不会被搜索引擎识别到.
解决SEO
常见的优化SEO的方法有很多,比如预渲染,服务器端渲染,优化首屏加载速度等等,这里我们采取使用服务器端渲染的方法来优化SEO.
那么服务器端渲染优化这一方法的本质是什么呢？SSR方法可以让我们在服务端生成HTML,然后直接发送给客户端,这样搜索引擎就也可以看到完整的页面内容了.
主要内容
那么VsCode启动!!!我们打开终端,我们使用npm init vite创建一个项目.创建完项目之后我们去到package.json文件中手动配置依赖.
{
"name": "ssr-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies":{
"express":"^4.17.2",
"vue":"^3.2.26",
"@vue/server-renderer":"^3.2.26"
},
"keywords": [],
"author": "",
"license": "ISC"
}
配置完依赖后,在终端安装一下依赖npm i这样我们就把所需的依赖安装完毕;
在本次demo中我们使用express框架.
const express = require('express');
const app = express();
const Vue = require('vue');
const renderer3 = require('@vue/server-renderer');
const vue3Compile = require('@vue/compiler-ssr');
我们引入我们所需要的模块const app = express();创建一个express实例.
设置路由处理器
app.get('/', async (req, res) => {
})
端口监听
app.listen(9093, () => {
console.log('server is running at port 9093');
})
现在我们来写一下内容,也就是HTML部分
const vueapp = {
template: `
"add">{{num}}h1>
<ul>
<li v-for="(todo, n) in todos">{{n+1}}-- {{todo}}li>
ul>
div>
`,
data() {
return {
num: 1,
todos: ['吃饭', '睡觉', '打豆豆']
}
},
methods: {
add() {
this.num++
}
}
}
这里我们使用的是vue2的选项式API,相较于vue3会比较好些出来.我们这里写了响应式数据num和todos,给h1绑定了一个点击事件.
现在我们就需要开始编译模版了,编译模版我们使用的是@vue/compiler-ssr模块进行编译
vueapp.ssrRender = new Function('require',
vue3Compile.compile(vueapp.template).code
)(require)
编译完成之后我们需要将内容拼接到HTML中去，现在我们就需要在路由处理器中操作了,将内容拼接完毕并返回给客户端.
app.get('/', async (req, res) => {
let vapp = Vue.createSSRApp(vueapp);
let html = await renderer3.renderToString(vapp);
const title = "Vue SSR"
let ret = `
html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>${title}title>
head>
<body>
<div id="app">
${html}
div>
body>
html>
`
res.send(ret);
})
let vapp = Vue.createSSRApp(vueapp);帮助我们在服务端创建一个渲染APP，let html = await renderer3.renderToString(vapp);将渲染APP转化成一个HTML字符串.
页面效果:
总结
相对于传统的客户端渲染,SSR的组件渲染在服务器端不是在浏览器端,我们让vue在服务器端运行.借助模块@vue/compiler-ssr编译模版,和使用@vue/server-renderer中的renderToString()方法将一个 Vue 组件实例转换为 HTML 字符串.最后进行拼接.
