什么是SSR？

基础概念，迅速略过。
从最早的 SSR 到 SCR 到 SSR，可能还有SSG。哈哈哈 VueSSR - 图1

如何实现Vue SSR？

Vue官方提供了 SSR 操作指南 。 服务端渲染可以认为是 同构。

核心流程

基础的demo应当通过阅读官方文档来完成，总体上实现的思路是：

  • 创建 Vue app实例。在node中不挂载也没法挂载
  • 创建 renderer require('vue-server-renderer').createRenderer
  • 把 Vue实例渲染为 HTML renderer.renderToString(app)

三步拿到 静态HTML代码。

后面配合 express 控制路由，渲染实例，输出代码。

路由的配置

用户每次访问SSR都会定位到某个路由，这里不能使用普通的 new Router 的方式，而应该封装为一个函数 createRouter 返回 new Router，理由是用户的每次访问应当重新渲染，而不能复用之前创建的路由。

构建流程

通过webapck构建得到：

  • server bundler 处理首屏页面
  • client bundle 静态页面激活成spa

因为在服务端进行渲染，所以声明周期钩子只能使用 beforeCreate created ，这就意味着在服务端无法使用其他生命周期钩子。

也说明，我们应该避免在 created时候留下副作用代码，如果无法避免，应当在 beforeMounted 或 Monted 时候。