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

服务端渲染简单来讲就是,服务端渲染好html字符串直接返回给前端浏览器展示,可以先从如下几个层面去理解,这也是开发架构的演变过程: ###1.传统的服务端渲染: 前端发请求,服务端完成html字符串的渲染直接返回给前端,每个页面的请求都如此,浏览器拿到的是全部的dom结构,开发模式上前后端不分离。

2.单页应用(SPA) :

  • SPA就是Single  Page App,顾名思义就是整个应用都是一个html页面,只是通过js去监听地址栏的变化来实现页面切换(dom的切换)。
  • 其实客户端访问时,只从服务端拿了一个html空壳子,然后去加载其中引用的js文件vue.js或react.js又或是其他,发现有数据要请求时发个ajax请求拿数据再渲染都页面,这就是客户端渲染。

SSR服务端渲染-简析_其他

3.服务端渲染 Server Side Render

SSR解决方案,后端渲染出完整的首屏的dom结构返回,前端拿到的内容包括首屏及完整spa结构,应 用激活后依然按照spa方式运行,这种页面应用可以称作为同构,其中前半段的渲染实现方式被称为服务端渲染 (server side render)SSR服务端渲染-简析_其他_02

为什么使用服务器端渲染 (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.是否做好了服务器高负载的准备?