浅析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 errconsole.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()。

浅析SSR(服务端渲染)和SPA(客户端渲染)相关推荐

【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】三种开启服务器的方法总结
SSR服务端渲染 get请求方式 get.html文件 <form action="http://10.9.46.253:4002" target="_self&q ...
SSR 服务端渲染与 CSR 客户端渲染
SSR 服务端渲染与 CSR 客户端渲染 SSR 服务端渲染 CSR 客户端渲染本文要点: 介绍 SSR 服务端渲染概念.优点.缺点.案例及常用框架. 介绍 CSR 服务端渲染概念.优点.缺点. S ...
NodeJS SSR服务端渲染：公共代码区分客户端和服务端
SSR服务端渲染(英语:server side render)指一般情况下,一个web页面的数据渲染完全由客户端或者浏览器端来完成.先从服务器请求,然后到页面:再通过AJAX请求到页面数据并把相应的数 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
SSR -- 服务端渲染基础
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读服务端渲染基础基本概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案,在这波前端 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点: 有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面. 对于网络慢或运行慢的设备,可提 ...

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

浅析SSR(服务端渲染)和SPA(客户端渲染)相关推荐

最新文章

热门文章