Vue SSR 理解+优缺点
ssr 服务端渲染，主要解决2个问题
- 更好的SEO
- SPA页面的内容是Ajax获取，而搜索引擎爬取工具并不会等待Ajax异步完成后再进行爬取页面内容，所以在SPA页面是抓取不到页面通过Ajax获取到的内容，爬虫获取的html，是一个没有数据的空壳子。
- 而SSR，是服务端直接将数据处理好，再拼接组装好，返回一个已经渲染好的页面（数据已经包含在页面中），所以爬虫可以爬取渲染好的页面。
- 首屏渲染更快
- SPA页面，需要等所有的Vue编译后的js文件全部下载完成之后，才开始进行页面的渲染，文件下载需要一定的时间，所以首屏渲染需要一定的时间。
- SSR直接有服务端渲染好页面直接返回显示，不需要等待下载js文件后再去渲染，所以SSR能解决SPA页面首屏渲染时间太长的问题。
Vue-SSR 的工作原理
浏览器请求一个url的时候，服务端，将首屏页面所需要的异步请求数据，填充完成后的完整html页面，返回给前端。SSR是一份代码运行在两个环境里面：服务端、客户端，首屏请求的时候，服务端将模板+异步数据，渲染成html页面，返回给前端，前端再载入js文件，完成激活，后续操作就是SPA了。 => 只有一个首屏是服务端渲染的带数据的html，seo爬虫就能爬获到数据，同时，首屏只需要渲染一个页面，后续激活SPA是发生在浏览器的，不需要在服务端操作，所以解决了首屏渲染问题，同时又能保持SPA的优势。
Vue SSR 的优缺点
优点
- 更好的SEO
- 解决首屏渲染问题（更快的首屏到达时间）
缺点
-
配置过程复杂，需要配置2个入口文件，① 服务端首屏渲染所需 ② 前端激活所需的。 => nuxt.js 可以更容易实现SSR
-
相比于SPA，服务端渲染加重了服务器的负担。
SPA是单例模式，SSR需要服务端返回Vue实例，一次首屏就需要创建一个实例，代码是工厂模式返回的实例，即多实例。
所以更浪费性能、
-
基于nodejs serve服务环境开发
Vue SSR总结
- 并不是所有网站都需要SEO，比如企业内部管理网站等，不惜要SEO，所以不需要使用SSR，直接使用SPA更好。
- 有些项目首屏，可以借用路由懒加载、预加载来解决
- https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/81256748
代码
步骤
-
新建文件夹 ssr：
mkdir ssr -
初始化文件夹：
npm init -y -
安装vue、vue-server-renderer：
npm i vue vue-server-renderer nodemon --save -
修改package.json文件：
"scripts": { "dev": "nodemon ./server.js" }, -
新建server.js文件：
touch server.js -
修改server.js中代码
-
运行命令：
npm run dev
代码
// 1. 引入vue
const Vue = require('vue')
const app = new Vue({
template: `<div>hello SSR !</div>`,
})
// 2. 使用vue-server-renderer的createRenderer，创建renderer
const renderer = require('vue-server-renderer').createRenderer()
// 3. renderer.toString(vue实例).then(html => {}).catch(err => {console.log(err)})
renderer
.renderToString(app)
.then((html) => {
console.log(html)
})
.catch((err) => {
console.log(err)
})
// ① 引入express，express()
const server = require('express')()
// 1. 引入vue
const Vue = require('vue')
// ② server.get('/',(req, res) => {})
server.get('/', (req, res) => {
const app = new Vue({
template: `<div>hello SSR !</div>`,
})
// 2. 使用vue-server-renderer的createRenderer，创建renderer
const renderer = require('vue-server-renderer').createRenderer()
// 3. renderer.toString(vue实例).then(html => {}).catch(err => {console.log(err)})
renderer
.renderToString(app)
.then((html) => {
console.log(html)
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />AaA
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>${html}</body>
</html>
`)
})
.catch((err) => {
console.log(err)
})
})
// ③ server监听3001端口
server.listen(3001, () => {
console.log('http://localhost:3001')
})