VueSSR理解+优缺点
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更好。
有些项⽬⾸屏，可以借⽤路由懒加载、预加载来解决
代码
步骤
1. 新建⽂件夹 ssr：mkdir ssr
2. 初始化⽂件夹：npm init -y
3. 安装vue、vue-server-renderer：npm i vue vue-server-renderer nodemon --save
4. 修改package.json⽂件：
"scripts": {
"dev": "nodemon ./server.js"
},
5. 新建server.js⽂件：touch server.js
6. 修改server.js中代码
7. 运⾏命令：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. String(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')
// ② ('/',(req, res) => {})
<('/', (req, res) => {
const app = new Vue({
template: `<div>hello SSR !</div>`,
})
ajax实例 文件浏览
// 2. 使⽤vue-server-renderer的createRenderer，创建renderer
const renderer = require('vue-server-renderer').createRenderer()
// 3. String(vue实例).then(html => {}).catch(err => {console.log(err)})  renderer
.renderToString(app)
.then((html) => {
console.log(html)
<!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('localhost:3001')
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。