什么是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)客户端上运行

生命周期

image.png

渲染一个 Vue 实例

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

与服务器集成

  1. const Vue = require('vue')
  2. const server = require('express')()
  3. const renderer = require('vue-server-renderer').createRenderer()
  4. server.get('*', (req, res) => {
  5. const app = new Vue({
  6. data: {
  7. url: req.url
  8. },
  9. template: `<div>访问的 URL 是: {{ url }}</div>`
  10. })
  11. renderer.renderToString(app, (err, html) => {
  12. if (err) {
  13. res.status(500).end('Internal Server Error')
  14. return
  15. }
  16. res.end(`
  17. <!DOCTYPE html>
  18. <html lang="en">
  19. <head><title>Hello</title></head>
  20. <body>${html}</body>
  21. </html>
  22. `)
  23. })
  24. })
  25. server.listen(8080)

TODO