SSR服务端渲染-简析

什么是服务端渲染 (SSR)？

服务端渲染简单来讲就是，服务端渲染好html字符串直接返回给前端浏览器展示，可以先从如下几个层面去理解，这也是开发架构的演变过程：

1.传统的服务端渲染：

前端发请求，服务端完成html字符串的渲染直接返回给前端，每个页面的请求都如此，浏览器拿到的是全部的dom结构，开发模式上前后端不分离。

2.单页应用(SPA) :

• SPA就是Single Page App，顾名思义就是整个应用都是一个html页面，只是通过js去监听地址栏的变化来实现页面切换（dom的切换）。

• 其实客户端访问时，只从服务端拿了一个html空壳子，然后去加载其中引用的js文件vue.js或react.js又或是其他，发现有数据要请求时发个ajax请求拿数据再渲染都页面，这就是客户端渲染。

  
  
  客户端渲染

3.服务端渲染 Server Side Render

SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应
用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染 (server side render)

SSR

为什么使用服务器端渲染 (SSR)？

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

• 更快的内容到达时间 (time-to-content)。

特别是对于缓慢的网络情况或运行缓慢的设备。这样通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要。

技术选型：

在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该考虑如下几个问题：
1.是否内容到达时间 (time-to-content) 对应用程序很重要，是否影响到转化率。
2.seo是否重要，例如只是一个后台管理系统，做seo就小题大做了。
3.现有spa项目庞大难以重构，可以考虑puppeteer来解决；
4.是否做好了服务器高负载的准备？