2 「武装思想」- React SSR vs SSR vs CSR

最新推荐文章于 2024-10-13 19:05:48 发布

Java图灵架构

最新推荐文章于 2024-10-13 19:05:48 发布

阅读量543

点赞数 9

分类专栏：前端程序员文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/m0_62673499/article/details/136766412

版权

前端程序员专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSR(SPA) 优缺点

页面之间的跳转不会刷新整个页面，而是局部刷新，体验上有了很大的提升。

单页应用中，只有首次进入或者刷新的时候才会请求服务器，只需加载一次js css资源，页面的路由维护在客户端，页面间的跳转就是切换相关的组件所以切换速度很快，另外数据渲染都在客户端完成，服务器只需要提供一个返回数据的接口,大大降低了服务器的压力。

所以后来就有了 web app的叫法，也是为了突出这种体验很像是Native App 。

SPA这种客户端渲染的方式在整体体验上有了很大的提升，但是它仍然有缺陷 - 对 SEO 不友好，页面首次加载可能有较长的白屏时间。

SSR VS CSR(SPA)

找了很久才找到这个图，相信看过之后就明白了。

下面这张图，是同一个应用，用两种不同的方式去渲染时页面的加载时序。

橙色部分为页面背景色，对应了常规意义上的白屏时间

可以看到，从内容可见的时间上，SSR比CSR更快。

这是由于 SSR 的工作原理，决定了它的优势，这种差异在弱网环境下会体现的更加明显。

SPA(客户端渲染) 方式比 SSR (服务端渲染) 模式在体验和性能上有了很大的提升。

SPA 好处有很多，但缺点也很明显。

SEO 不够友好：有些网站的流量来源主要还是靠搜索引擎，所以网站的 SEO 效果还是很重要的，而 SPA 模式页面数据非直出，搜索引擎爬虫拿不到具体的数据，所以无法对网站的内容进行识别和分类，得不到网站的关键词和描述信息，就无法进行排名，甚至不会被收录。结果就是在搜索引擎里搜不到你的站点。

首次白屏等待：在 SPA 模式下，第一次打开页面我们得到的是一个html 框架，不包含内容。数据的渲染需要等待页面js css资源加载完成,且执行时再发起异步数据请求，然后等数据返回后，再进行渲染，渲染完成后用户才能看到最终的页面。

这样做会直接降低页面的首屏展现时间，也就是“白屏”等待，这个时间的长短和客户端的网络环境也密切相关，可能长也可能短，特别是在移动互联网环境下，对首屏加载性能影响很大。对于用户来说，当然是想更快的看到内容。

React SSR

到这里我们已经了解了 SSR 和 CSR 的概念以及优缺点。它们自身的亮点很多，但是瑕疵也很多。

SPA 模式下，虽然体验上来了，也降低了服务端的压力。但是还不算完美，仍有缺陷。

那么有没有一种完美的方式呢？

既然发现了问题，那就要想办法解决这个问题。

我们先来分析下。

确定问题：其实就两个问题

SEO不友好
首次白屏等待。

以上两个问题是在传统 SSR 模式下是不存在的,因为服务端会直接返回完整的html数据。

所以如果要解决这个问题我们只能让数据直出 SSR 了。

但如果这样做的话，SPA 的优势就没有了，技术上没有任何进步。

SSR + SPA 完美的结合

只实现 SSR 没什么意义，技术上没有任何改进，否则 SPA 技术就不会出现。

但是单纯的 SPA 又不够完美，所以最好的方案就是这两种技术和体验的结合。

第一次打开页面是服务端渲染，基于第一次访问，用户的后续交互是 SPA 的效果和体验，于此同时还能解决SEO问题，这就有点完美了。

单纯实现 SSR 很简单，毕竟这是传统技术，且和语言无关，随便用 php 、jsp、asp、node 等都可以实现。

下面用 node 实现一个基本的 ssr

创建一个 node 服务
模拟数据请求方法 fetchData
将fetchData结果转换为 html 字符串
输出完整的 html 内容

效果如下

const http = require(‘http’);

//模拟数据的获取

const fetchData = function () {

return {

list: [{

num: 100

{

num: 2000

}, {

num: 10

}

]

}

//数据转换为 html 内容

const dataToHtml=(data)=>{

var html=‘’;

data.list.forEach(item=>{

html += <div>${item.name}有${item.num}个</div>

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。