SSR 服务端渲染

官网

GitHub

 SSR全拼是Server-Side Rendering，服务端渲染。
所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。

从这张图片，我们可以知道：我们需要通过Webpack打包生成两份bundle文件：

• Client Bundle，给浏览器用。和纯Vue前端项目Bundle类似
• Server Bundle，供服务端SSR使用，一个json文件

左侧Source部分就是我们所编写的源代码，所有代码有一个公共入口，就是app.js，紧接着就是服务端的入口（entry-server.js）和客户端的入口（entry-client.js）。当完成所有源代码的编写之后，我们通过webpack的构建，打包出两个bundle，分别是server bundle和client bundle；当用户进行页面访问的时候，先是经过服务端的入口，将vue组件组装为html字符串，并混入客户端所访问的html模板中，最终就完成了整个ssr渲染的过程。

 SSR能够在服务端先进行请求渲染，由于服务端进行请求数据的时延较小，能够快速拿到数据并且返回HTML代码。在客户端可以直接渲染数据而不需要花费一些请求数据的时间，这是服务端渲染的好处。返回内容SSR会比普通的SPA在HTML代码中多出首次渲染的结果，这样在初始化的时候直接将页面进行渲染，无需花费时间去请求数据再次渲染。SSR并不是说只在服务端进行渲染，而是说SSR会比普通的客户端渲染多一次在服务端渲染。到浏览器这边，SSR还是需要进行再次初始化Vue，并且经过beforeCreate、created、beforeMount、mounted生命周期，但是在客户端VNode进行patch的时候，如果遇到服务端渲染过的节点，那么会跳过，所以在浏览器端渲染的时候可以减少一些工作，从而提高了页面体验。

客户端渲染与服务端渲染的区别

传统的SPA模式

　　即客户端渲染的模式

1. Vue.js构建的应用程序，默认情况下是有一个html模板页，然后通过webpack打包生成一堆js、css等等资源文件。然后塞到index.html中

2. 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 -> 用户

SSR模式

　　即服务端渲染模式

1. 用户输入url访问页面 -> 服务端接收到请求 -> 将对应请求的数据渲染完一个网页 -> 返回给用户