服务器端渲染 SSR：解决 SPA 应用的 SEO 问题服务器端渲染 (SSR)是一种在服务器端完成页面渲染的技术。在这
什么是服务器端渲染 (SSR)
SSR（Server-Side Rendering）是一种在服务器端完成页面渲染的技术。在这种模式下，服务器接收到客户端的请求后，会先根据请求数据和模板文件生成完整的HTML页面，然后将这个页面直接发送给客户端。这样，用户可以直接看到完整的内容，无需等待JavaScript加载和执行。
为什么要用 SSR？
与客户端的单页应用 (SPA) 相比，SSR 的优势主要在于：
-
更快的首屏加载。服务端渲染的 HTML 不需要等到所有的 JavaScript 都下载并执行完成之后才显示，用户可以更快地看到完整渲染的页面。
-
更好的 SEO（搜索引擎优化）：搜索引擎爬虫可以直接看到完全渲染的页面。所以在PC端的时候，为了解决单页应用 (SPA) 对于 SEO 不太友好的问题，就可以使用 SSR。
SSR例子
创建项目
创建文件夹ssr-demo，在终端输入npm init -y 初始化一个新的 Node.js 项目。可以得到一个 package.json 文件，在这个文件中添加 dependencies 字段，列出项目运行时所需的第三方模块，如下所示。
在终端输入npm i安装这些依赖，接着在 ssr-demo 文件夹中添加一个文件index.js。
代码实现
用 Express 创建一个基本的 Web 服务器，如下所示。
const express = require('express'); // 类 koa 简单backend框架 commonjs(在nodejs中默认是这个)
const app = express();
// http 协议基于请求响应的简单协议
app.get('/', async (req, res) => { // 添加路由接口
res.end('hello world')
})
// 手机端用spa
app.listen(9093, () => {
console.log('server is running at post 9093');
})
在上面的例子中接着引入 Vue.js。
const Vue = require('vue');
定义一个 Vue 组件为vueapp，它包含了模板、数据和方法。其中 template 属性定义了组件的 HTML 结构，并使用了 Vue 指令（如 v-for 和 @click）。data 方法返回组件的状态数据。methods 对象定义了组件的方法，如 add 方法。下面就用了一个简单的todos来举例。
const vueapp = {
// 模板部分
template: `
<div>
<h1 @click="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++;
}
}
}
引入 Vue 服务器端渲染（SSR）相关库。其中 @vue/server-renderer：Vue 的服务器端渲染库。@vue/compiler-ssr：Vue 的 SSR 编译器，用于编译 Vue 模板。
const renderer3 = require('@vue/server-renderer') // ssr
const vue3Compiler = require('@vue/compiler-ssr'); // 模板编译
编译 Vue 模板，使其可以在服务器端渲染。vue3Compile.compile(vueapp.template)：这个方法会将 vueapp.template 中的 Vue 模板编译成一段 JavaScript 代码。编译后的代码是一个函数，该函数可以在服务器端执行，生成相应的 HTML 字符串。
vueapp.ssrRender = new Function('require',
vue3Compile.compile(vueapp.template).code // 将组件中的模板编译
)(require)
创建 Express 路由，处理根路径的 GET 请求。在该路由中，创建了一个 Vue SSR 应用实例 vapp。 使用 renderer3.renderToString 方法将 Vue 应用转换为 HTML 字符串。构建完整的 HTML 文档，并发送到客户端。
app.get('/', async (req, res) => { // 添加路由接口
// 爬虫 拿到组件的html 在vue之前
// res.end('hello world')
let vapp = Vue.createSSRApp(vueapp) // 创建服务器端渲染App
let html = await renderer3.renderToString(vapp) // 渲染成html字符串
const title = "Vue SSR" // 定义页面标题
// 构建完整的 HTML 文档
let ret = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${title}</title>
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`
// 发送完整的 HTML 文档到客户端
res.send(ret);
})
最后在浏览器中输入http://localhost:9093，就可以得到如下所示的结果了。
通过检查代码可以看到已经成功将 Vue 应用转换为 HTML 字符串。
总结
服务器端渲染 (SSR) 解决了单页应用对于 SEO 不太友好的问题。
在 PC 端开发时，可以使用 SSR（服务器端渲染）来提高 SEO 和首屏加载速度。而在手机端，SPA（单页应用）则更适合提供流畅的用户体验和实时数据更新。不过，结合 SSR 和 SPA 的混合方案可以兼顾两者的优点，确保在不同设备上都能获得最佳表现。
转载自:https://juejin.cn/post/7411168461500153868