服务端渲染SSR

发表于 | 分类于

服务端渲染

什么是服务端渲染

将组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可交互的应用程序

为什么有服务端渲染

优势

  • 更好的SEO，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
    SEO重要但页面异步获取内容 ==> SSR
  • 更快的内容到达时间，无需等待所有的JS都完成下载并执行
    用户体验 ==> SSR

权衡之处

  • 开发条件有限，部分代码需要处理才能在应用程序中运行
  • 需要处于Node.js server运行环境中
  • 更多的服务器端负载，需要明智采用缓存策略

VUE SSR原理

image
打包处两个bundle

  • server bundle 用于服务端渲染
  • client bundle 用于客户端渲染

server和client插件应用举例

如果写的是一个插件

  • 设置该插件的属性为ssr: false表示只在客户端运行该插件
  • 设置该插件的属性为ssr: true表示既在客户端运行该插件，也在服务端运行
  • 比如写两个请求api的插件，
    • server-api.js在服务端请求: ssr: true
    • client-api.js在客户端请求: ssr: false

Nuxt.js

简介

是一个基于vue.js的通用应用框架，通用意味着可能是

  • SSR
  • SPA
  • 静态化 （预渲染）
    客户端/服务端都有

流程

应用一个完整的服务器请求到渲染 or 通过<nuxt-link> 切换路由渲染页面
image
image

Nuxt.js相比SSR

  • 提供页面级的asyncData和fetch在组件渲染之前异步获取数据并更新页面data以及store中的数据
  • 提供页面级的head方法和nuxt.config.js中的head属性来配置当前页面/全局的头部标签，以此来实现对SEO的要求

Nuxt生命周期

在vue的基础上扩展

1
2
3
4
5
6
7
8
9
10
export default {
  middleware () {},
  validate () {},
  asyncData () {}, //服务端
  fetch () {}, //store数据加载
  beforeCreate () {},
  created () {}, //服务端和客户端都会执行
  beforeMount () {},
  mounted () {}, //客户端
}

asyncData()

该方法是服务端渲染能力体现的方法，首次渲染服务时必须使用该方法。asyncData会传进一个context参数，通过该参数可以获得一些信息

1
2
3
4
5
6
7
asyncData(ctx) {
  ctx.app //根实例
  ctx.route //路由实例
  ctx.params //路由参数
  ctx.query //路由问号后参数
  ctx.error //错误处理方法
}

比如使用 asyncData( { app, route, payload } )

  • 方法内不能用this来引用组件实例
  • 限于Page页面组件，components中不适用
  • 主要用于请求ajax填充data中的数据
  • 第一次执行环境为node环境中，也就是服务器端
    后续刷新页面执行环境为client端
  • 获取数据的过程：在服务器端把异步获取到的数据扔给浏览器
    通过下发一个script标签，然后在window上接一个对象
    1
    2
    3
    4
    5
    <script>
      window._nuxt_ = ...
      window.layout = ... //用哪个模板
      window.data = ... //数据
    </script>