什么是SSR
- 服务端渲染与客户端渲染相比
- React 或者 Vue 这种前后端同构渲染相比与传统的 PHP，jsp，asp 的模板渲染
什么是Vue SSR

什么是SSR

SSR就是服务端渲染，指的是服务器端完成把数据和模板转换成最终的 HTML ，区别于 CSR（客户端渲染），后者是在客户端通过调用dom api完成。SSR 实际上并没有限定语言和框架

传统的 PHP，jsp，asp 的模板渲染也是服务端渲染
Node JS 领域，包含了 React 或者 Vue 这种前后端同构的模式（本文章说的是这种）
也包含了 Express / Koa / Egg 等基于模板渲染的模式

服务端渲染与客户端渲染相比
优点
更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
更快的内容到达时间，白屏时间短

缺点：占用更多的服务端资源

React 或者 Vue 这种前后端同构渲染相比与传统的 PHP，jsp，asp 的模板渲染

优点

可以利用庞大的前端npm生态
使用webpack等构建工具，使用es6+ 的js语法，无需学习java 模版语法
提升开发效率，热更新无需重启服务器和编译代码（主要）

缺点
需要nodejs server 的开发和运维经验

什么是Vue SSR

默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序。大部分代码都可以在服务器(nodejs)和客户端上运行

生命周期

渲染一个 Vue 实例

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})
// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

与服务器集成

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><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})
server.listen(8080)

TODO

前后端笔记

搞懂Vue SSR