2023年6月29日发(作者：)

VueSSR理解+优缺点Vue SSR 理解+优缺点ssr 服务端渲染，主要解决2个问题更好的SEOSPA页⾯的内容是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个⼊⼝⽂件，① 服务端⾸屏渲染所需 ② 前端激活所需的。 => 可以更容易实现SSR相⽐于SPA，服务端渲染加重了服务器的负担。SPA是单例模式，SSR需要服务端返回Vue实例，⼀次⾸屏就需要创建⼀个实例，代码是⼯⼚模式返回的实例，即多实例。所以更浪费性能、基于nodejs serve服务环境开发Vue SSR总结并不是所有⽹站都需要SEO，⽐如企业内部管理⽹站等，不惜要SEO，所以不需要使⽤SSR，直接使⽤SPA更好。有些项⽬⾸屏，可以借⽤路由懒加载、预加载来解决代码步骤1. 新建⽂件夹 ssr：

mkdir ssr2. 初始化⽂件夹：npm init -y3. 安装vue、vue-server-renderer：

npm i vue vue-server-renderer nodemon --save4. 修改⽂件： "scripts": { "dev": "nodemon ./" },5. 新建⽂件：touch 6. 修改中代码7. 运⾏命令：npm run dev代码// 1. 引⼊vueconst Vue = require('vue')const app = new Vue({ template: `

`,})// 2. 使⽤vue-server-renderer的createRenderer，创建rendererconst renderer = require('vue-server-renderer').createRenderer()// 3. ng(vue实例).then(html => {}).catch(err => {(err)})renderer .renderToString(app) .then((html) => { (html) }) .catch((err) => { (err) })// ① 引⼊express，express()const server = require('express')()// 1. 引⼊vueconst Vue = require('vue')// ② ('/',(req, res) => {})('/', (req, res) => { const app = new Vue({ template: ``, }) // 2. 使⽤vue-server-renderer的createRenderer，创建renderer const renderer = require('vue-server-renderer').createRenderer() // 3. ng(vue实例).then(html => {}).catch(err => {(err)}) renderer .renderToString(app) .then((html) => { (html) (` AaA ${html} `) }) .catch((err) => { (err) })})// ③ server监听3001端⼝(3001, () => { ('localhost:3001')})