Vue SSR 理解+优缺点

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总结

代码

步骤

  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. 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')
})
posted @ 2021-07-10 16:29  shine_lovely  阅读(2399)  评论(0)  编辑  收藏  举报