#每天都是崭新的一天#再累也要照顾好自己

浅析SSR(服务端渲染)和SPA(客户端渲染)

一、前言

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


二、什么是服务端渲染

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

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


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


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



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

1、SSR渲染的优势:

(1)更利于SEO;

(2)更利于首屏渲染(特别是对于缓慢的网络情况或运行缓慢的设备,内容更快到达)

2、SSR渲染的缺点:

(1)服务器压力大,考虑服务器端负载。

(2)开发条件受限,只会执行到ComponentMount之前的生命周期钩子,引用第三方库不可用其他生命周期钩子,引用库选择产生很大的限制。

(3)学习成本增大,需要学习构建设置和部署的更多要求。


四、耗时比较

1、数据请求

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




2、HTML渲染

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

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

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




五、原理

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

具体实现:

1、创建一个空项目 mkdir vuessr && cd vuessr

2、运行 npm init 进行初始化

3、安装我们需要的依赖 cnpm install vue vue-server-renderer --save

4、创建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>
})

5、运行 node index.js 可以看到在控制台输出了

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


六、总结

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

感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/621.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11