- 作者：老汪软件技巧
- 发表时间：2024-09-07 17:03
- 浏览量：
VUE项目是SPA的项目，既可以做SSR服务器渲染也可以CSR客户端渲染
SPA （Single Page Application）
SPA是一种单页面应用的Web应用的设计模式。
在这种模式下，用户在浏览网站时，页面不会重新加载或只会部分重载
用户体验：
页面加载方式：
URL处理：
前后端分离：
SEO（搜索引擎优化）挑战：
性能：
开发和维护：
资源消耗：
CSR客户端渲染
在我们平常写VUE项目的时候大部分时候使用的都是CSR客户端渲染的方式
其中页面的主要内容和动态数据都是在用户的浏览器中通过JavaScript生成的。
这就导致了SEO的排名会靠后，搜索引擎爬虫可能无法有效地执行JavaScript代码，它们可能无法完全理解和索引通过JavaScript动态生成的内容。
我们直接创建一个vite项目，运行后可以看到
在浏览器中只有一个app的挂载点，并且其他的页面都是通过JavaScript去生成的，也就意味着，像响应式之类的操作，以及页面的交互都是在浏览器端完成的，但是如果是搜索引擎爬虫的话就没办法高效的读取，就意味着对其不太友好，搜索引擎爬虫希望的是访问得到的就是有完整结构的html
这时候就需要通过服务端将页面处理好发给前端
SSR服务端渲染
服务端渲染（Server-Side Rendering, SSR）是一种Web开发技术，它允许在服务器端生成完整的HTML页面，并将其发送到客户端浏览器。这种方式与传统的客户端渲染（CSR）不同，在CSR中，HTML页面的初始加载仅包含基本结构，而动态内容则通过JavaScript在客户端加载后动态生成。
接下来我们写一个例子
我们先添加对应的依赖
npm install express vue @vue/server-renderer @vue/compiler-sfc @vue/compiler-ssr
分别是以下依赖
"express": "^4.17.2",
"vue":"^3.2.26",
"@vue/server-renderer":"^3.2.26"
const express = require("express"); // 类koa 简单backend框架 commonjs
const app = express();
const Vue = require("vue"); // vue走向后端
const readerer3 = require("@vue/server-renderer"); // ssr
const vue3Compile = require("@vue/compiler-ssr"); // 编译模板
我们创建一个vue的页面
const vueapp = {
template: `
{{num}}
- {{n+1}}-- {{todo}}
`,
data() {
return {
num: 1,
todos: ["吃饭", "睡觉", "打豆豆"],
};
},
methods: {
add() {
this.num++;
console.log("11");
},
},
};
接下来我们为vueapp添加ssrRender属性
vueapp.ssrRender = new Function(
"require",
vue3Compile.compile(vueapp.template).code
)(require);
添加一个get请求
// http 协议基于请求响应的简单协议
app.get("/", async (req, res) => {
// 爬虫 拿到 组件的html 在vue之前
// res.end('hello world');
// 创建服务器端的渲染app
let vapp = Vue.createSSRApp(vueapp);
// 渲染
let html = await readerer3.renderToString(vapp);
const title = "vue3 ssr";
let ret = `
<span class="hljs-subst">${title}</span>
${html}
`;
res.end(ret);
});
创建 Vue 应用
// 创建服务器端的渲染app
let vapp = Vue.createSSRApp(vueapp);
渲染组件
// 渲染
let html = await readerer3.renderToString(vapp);
// 渲染
let html = await readerer3.renderToString(vapp);
生成完整的 HTML 响应
const title = "vue3 ssr";
let ret = `
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}title>
head>
<body>
<div id="app">${html}div>
body>
html>
`;
const title = "vue3 ssr";
let ret = `
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}title>
head>
<body>
<div id="app">${html}div>
body>
html>
`;
启动项目
app.listen(9093, () => {
console.log("server is running at port 9093");
});
最后执行后端并访问前端即可看到页面显示
并且该页面是由后端处理好，前端直接显示的，这也就是SSR服务器渲染
