服务器端渲染和客户端渲染有什么区别？

我们在walmart.com网站上的大多数页面采用服务器端渲染（简称SSR）方式。之所以选择服务器端渲染，主要出于以下两点考虑：

能够为客户提供更理想的性能
提供更为一致的SEO表现

正是由于SSR拥有上述优势，因此我们在将自有堆栈转换为React与Node.js时，投入了大量时间与精力以优化SSR性能。其中的一项关键性指标正在于页面内“明显位置”的渲染性能。我们发布的开源项目Electrode框架当中包含多种模块，能够有效提升SSR性能。感兴趣的朋友可以点击下面链接参阅我之前发布的各模块助益评述。

https://medium.freecodecamp.com/using-fetch-as-google-for-seo-experiments-with-react-driven-websites-914e0fc3ab1

在发布Electrode框架并强调其面向SSR的设计思路之后，我收到了大量关于SSR优势的疑问与评论。在今天的博文中，我将专门探讨使用SSR在性能层面带来的改善效果——另外亦感谢Andrew Farmer与Patrick Hund在SEO优势评述方面提供的协助。

理论性能收益

首先我们将通过下面这份简单的时间线图展示SSR与CSR（即客户端渲染）之间的区别。

可以看到其中最大的区别在于，在使用SSR的情况下您的服务器对浏览器的响应结果属于已做好准备并可进行渲染的页面HTML，而CSR的浏览器响应结果则属于链接至您JavaScript的空文档。这意味着您的浏览器将立足服务器进行HTML渲染，而无需等待全部JavaSciprt代码的下载与执行。在这两种情况下，我们都需要下载React并利用同样的流程构建一个虚拟dom，而后附加各事件以实现页面交互——但在SSR方面，用户可在执行上述流程的同时查看到页面内容。而在CSR方面，大家则需要等待上述流程全部执行完成，而后方可进行查看。

现在，我们来了解以下注意事项：

尽管在SSR方面，页面会提前进行渲染以帮助客户更早查看页面内容，但在React真正执行完成之后，查看到的内容并无法进行交互。如果客户在此期间点击某按钮，该操作亦需要等待React执行完成后方可起效;
SSR TTFB（即第一字节时间）速度比CSR更慢，因为您的服务器需要耗费时间为页面创建HTML，而非直接发送相对较空的响应内容;
SSR的服务器数据吞吐量要远低于CSR数据通量。以React为例，这种数据吞吐量的差异将造成显著区别。ReactDOMServer.renderToString为一项同步CPU绑定调用，其中包含该事件循环，意味着服务器将无法在ReactDOMServer.renderToString完成之前处理其它请求。这里我们假定您的页面需要500毫秒进行SSR，则意味着您每秒至多只能执行2项请求。

实际案例

在下图当中，我们就walmart.com网站上的各生产应用对SSR与CSR进行渲染效果比对。

我们将三款应用（即主页、分类与搜索）分别立足SSR与CSR方式进行比较。相关结果来自Chrome浏览器所捕捉到的页面渲染时间指标。大家可能已经注意到，SSR渲染速度要更快一些，而使用CSR则意味着加载过程中浏览器内将显示空白页面。大多数使用CSR的应用都会利用加载图标来取代这种难看的空白页面，但由于我们在正常操作中默认使用SSR，因此在CSR测试中页面仍保持未经发动的空白样式。需要注意的是，上述结果皆为我们的设备在一天中特定时段内配合实际生产配置捕捉到的结果，因此经过定制化调整的方案也许在性能上有所区别——不过总体而言，其仍然足以反映一般性趋势。

上图为主页、分类与搜索页面的首次服务器响应对比。在这里我忽略掉了绿色指标条，因为其更多反映的是网络图中的其它元素。这里最值得关注的其实是文档大小与TTFB。由于服务器会利用HTML对页面进行响应，因此大家可以看到SSR的文档总是相对较大。另外需要强调的是，正如前文中所提到，CSR响应速度更快（除了主页，这是因为受到本次测试中某些因素的影响）。

这里再次向大家强调，上述测量指标会随着应用类型、延迟、服务器、位置以及多种其它变量的变化而有所浮动，因此请不要将其视为科学的客观事实——而仅用于反映一种普遍规律。

Electrode框架

在我们对SSR与CSR进行A/B测试时，得出了以上总体趋势，而我们的数字也显示尽早进行渲染往往能够带来更理想的操作体验。

考虑到这些理由，我们的开源应用平台Electrode高度关注SSR。其默认启用SSR，而我们亦构建起多种模块以进一步提升SSR性能表现。感兴趣的朋友亦可点击此处参阅另一篇文章，我在其中展示了如何利用其中两款模块将RenderToString()时间缩短达70%。

这里再次感谢Mayakumar与Caoyang协助我审查并调整了本篇博文的具体内容。

原文链接：https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

今日荐文

点击下方图片即可阅读

区块链技术与微服务架构之间有什么关系？

今年，架构师关注的技术点有何不同？从云计算、大数据、微服务、容器，到现在的人工智能，架构师应该怎么做？这里推荐一场会议，为你总结了100+国内外技术专家现阶段的架构实践，8折即将截止，点击“阅读原文”，看看对你有何启发。

服务器端渲染和客户端渲染有什么区别？相关推荐

服务端渲染和客户端渲染区别？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: ...
【SSR和CSR】服务端渲染和客户端渲染区别？如何快速分辨页面是SSR还是CSR？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application)单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: 缺 ...
关于服务器渲染与客户端渲染的区别
服务器渲染: 也称SSR.当浏览器发送请求时,在服务器上渲染完整的第一个屏幕dom结构,即将数据与html整合,之后返回给浏览器. 客户端渲染: 当浏览器发送请求后,服务器只会发送html框架,浏览器 ...
如何快速判断页面是服务端渲染还是客户端渲染
什么是服务器端渲染和客户端渲染? 互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文 ...
浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
React的服务器渲染和客户端渲染
React的服务器渲染和客户端渲染简单谈一谈React服务器渲染和React客户端渲染首先我们来区分一下: React客户端渲染和 React服务端渲染两者的区别: React客户端渲染: 1 ...
服务端渲染与客户端渲染详解（vue）
1.客户端请求 (1)用户在浏览器输入请求的地址例如:172.0.0.1:8080 到服务器服务器接受到客户端的请求拿到一个没有被数据渲染的空页面 (2)客户端拿到服务端的空字符串页面,然后从上往下 ...
服务端渲染vs客户端渲染到前后端同构
关于服务端渲染与客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解. 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
前端渲染：服务器渲染 or 客户端渲染
渲染工作应该由谁完成? 时下,前端 UI 设计越来越复杂,可谓"XX与XX齐飞,XX共XX一色". 越来越复杂的 UI 意味着越来越重的渲染工作. 目前通常有两种选择:服务器渲染 ...
服务端渲染or客户端渲染
其实,服务端渲染不是一个新鲜的事情. 最开始的时候,其实网站都是服务端渲染的,后来是出现SPA框架进行客户端渲染.现在热点又回归服务端渲染. 通过这篇文章,带你了解服务端渲染和客户端渲染是怎么一回事. ...

服务器端渲染和客户端渲染有什么区别？

今日荐文

服务器端渲染和客户端渲染有什么区别？相关推荐

最新文章

热门文章