对比分析--浅析SSR(服务端渲染)和SPA(客户端渲染)

1、前言

C端项目重构成首屏服务端渲染（SSR：serve side render），对于重构成SSR，redux不是必须的。本文以vue为栗子的项目。

 

2、什么是服务端渲染

将组件或页面经过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上彻底交互的应用程序。

我以weekly周报的登录页面为例

登录页没有使用服务端渲染，请求到login页面，返回的body为空，以后执行js将html结构注入到body中，结合css显示出来

 

个人另一个vue的nuxt写的ssr渲染的songEagle，首页返回的body是带有html的。

 

3、SSR渲染和客户端渲染的区别

一、SSR渲染的优点：

（1）更利于SEO；

（2）更利于首屏渲染（特别是对于缓慢的网络状况或运行缓慢的设备，内容更快到达）

二、SSR渲染的缺点：

（1）服务器压力大，考虑服务器端负载。

（2）开发条件受限，只会执行到ComponentMount以前的生命周期钩子，引用第三方库不可用其余生命周期钩子，引用库选择产生很大的限制。

（3）学习成本增大，须要学习构建设置和部署的更多要求。

 

4、耗时比较

一、数据请求

由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要缘由。服务端在内网进行请求，数据响应速度快。客户端在不一样网络环境进行数据请求，且外网http请求开销大，致使时间差。

 

二、HTML渲染

服务端渲染是先向后端服务器请求数据，而后生成完整首屏html返回给浏览器；

而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。

就是服务端渲染不须要等待js代码下载完成并请求数据，就能够返回一个已有完整数据的首屏页面。

 

5、原理

相对于SPA，vue增长了一些扩展工具，首先咱们来看一下比较重要的一个工具vue-server-renderer，从名字就知道是在服务端渲染时候调用的

具体实现：

一、建立一个空项目 mkdir vuessr && cd vuessr

二、运行 npm init 进行初始化

三、安装咱们须要的依赖 cnpm install vue vue-server-renderer --save

四、建立index.js代码以下：

// 第 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> })

五、运行 node index.js 能够看到在控制台输出了

<div data-server-rendered="true">Hello World</div>

 

6、总结

什么是SSR？将组件或页面经过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上彻底交互的应用程序。SSR有更利于SEO和首屏渲染，同时也有缺点：服务器压力大，开发条件受限，只会执行ComponentMount以前的生命周期，第三库使用受限，学习成本大。原理是靠vue-server-renderer这个库的createRenderer()，而后调用rendererToString()。

 

【谢谢关注和阅读，后续新的文章首发：sau交流学习社区：https://www.mwcxs.top/】