十.服务端渲染

前言

vue 项目服务端渲染的场景，以及工具的选型与用法

1.服务端渲染

概念：放在浏览器进行就是浏览器渲染,放在服务器进行就是服务器渲染。

客户端渲染不利于 SEO 搜索引擎优化
服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
SSR 直接将 HTML 字符串传递给浏览器。大大加快了首屏加载时间。
SSR 占用更多的 CPU 和内存资源
一些常用的浏览器 API 可能无法正常使用
在 vue 中只支持 beforeCreate 和 created 两个生命周期
Nuxt.js 是使用 Webpack 和 Node.js 进行封装的基于 Vue 的 SSR 框架

2.案例

package.json

json

{
  "name": "ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "vue": "^2.5.17",
    "vue-server-renderer": "^2.5.17"
  }
}

index.js

//第一步：创建一个vue实列
const Vue = require("vue")
const app = new Vue({
  template: `<div>Hello World</div>`,
})

const renderer = require("vue-server-renderer").createRenderer({
  template: require("fs").readFileSync(`./index.html`, "utf-8"),
})

renderer.renderToString(app, (err, html) => {
  console.log(html) //html 将是注入应用程序内容的完整页面
})
//第二步：创建一个 renderer
// const renderer = require("vue-server-renderer").createRenderer();

//第三步：将vue 实列渲染为html
// renderer.renderToString(app, (err, html) => {
//   if (err) throw err;
//   console.log(html);
// });

//在2.5.0+ 如果没有传入回调函数，则返回Promise
// renderer
//   .renderToString(app)
//   .then(html => {
//     console.log(html);
//   })
//   .catch(err => {
//     console.log(err);
//   });

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>hello</title>
</head>

<body>
    <!--vue-ssr-outlet-->
</body>

</html>

express.js

const Vue = require("vue")
const server = require("express")()
const renderer = require("vue-server-renderer").createRenderer()

server.get("*", (req, res) => {
  const app = new Vue({
    data: {
      url: req.url,
    },
    template: `<div>访问的 url 是：{{ url }}</div>`,
  })
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end("Internal Server Error")
      return
    }
    res.end(`
        <!DOCTYPE html>
        <html lang="en">
            <head><meta charset="UTF-8"><title>Hello</title></head>
            <body>${html}</body>
        </html>
    `)
  })
})

server.listen(8080)

十.服务端渲染 ​

1.服务端渲染 ​

2.案例 ​

十.服务端渲染

1.服务端渲染

2.案例