SeverSideRender

一、ssr、csr、同构

• ssr(SeverSideRender) 服务端渲染

ssr从web出现便一直存在，早期的网站都是ssr来实现的，流程参考下图

• csr（ClientSideRender ） 客户端渲染

随着ajax技术以及mvvm框架的出现，单页应用从幕后走向前台并逐渐普及

• ssr和csr的对比

ssr:

• 更好的SEO：由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面；
• 更快的内容到达时间（time-to-content）：特别是对于缓慢的网络情况或运行缓慢的设备
• 每次页面跳转都需要重新加载，体验不佳

csr:

• 随着单页应用（SPA）的流行而流行，比较适合不强调SEO的中后台富交互应用；
• 首次页面加载要等到资源都加载执行完，用户才可以进行操作；
• 单页应用页面跳转无刷新，用户体验丝滑。

• 同构（isomorphic）

ssr和csr各有优缺点，想要兼顾他们的优点，同构的因此而诞生

二、业务需求

现在已经了解了ssr、csr以及同构，那么真实开发中需要用到同构以及SSR吗，要根据我们的业务场景来分析

• 2B/中后台：对SEO要求不高，不需要
• 2C/强SEO：如果对SEO要求不高或者sitemap相对较小则不需要；如果SEO要求高则分析页面数据是偏动态还是静态，如果页面数据比较偏静态，不推荐使用ssr，因为ssr在服务端渲染是有一定性能损害的，建议用prerendering；如果数据偏动态，并且强SEO需求，则需要使用ssr或者同构