Serverless实战——使用Rendertron搭建无头Chrome渲染解决方案

  

     为什么需要Rendertron ?

  

传统的Web页面,通常是服务端渲染的,而随着温泉(单页面应用程序)尤其是反应,Vue,角为代表的前端框架的流行,越来越多的Web应用程序使用的是客户端渲染。

  

使用客户端渲染有着诸多优势,比如节省后端资源,局部刷新,前后端分离等等,但也带来了一些挑战,比如本文要解决的SEO问题。

  

对于服务端渲染的页面,服务端可以直接将内容通过HTML的形式返回,搜索引擎爬虫可以轻易的获取页面内容,而对于客户端渲染的应用,客户端必须执行服务器返回的Javascript才能得到正确的网页内容。目前,除谷歌、必应支持Javascript外(也会有一些限制),其他的大部分搜索引擎都不支持Javascript,也就无法获取正确的网页内容。

  

谷歌推出的   Rendertron就是为了解决这样场景的一款工具。通过使用Rendertron,温泉也能够被不支持执行Javascript的搜索引擎爬取渲染后的内容。其原理主要是通过使用无头Chrome在内存中执行Javascript,并在得到完整内容后,将内容返回给客户端。

  

     效果一览

  

谷歌官方提供了示例   https://render-tron.appspot.com/,可以直接体验效果。

  

我们也提供了部署在函数计算上的示例:   http://renderton.mofangdegisn.cn

  

   Serverless实战——使用Rendertron搭建无头Chrome渲染解决方案”>
  <p>
  </p>
  <h3 id=      系统架构   

基于函数计算,我们的服务架构如下:

  

   Serverless实战——使用Rendertron搭建无头Chrome渲染解决方案”>
  <p>
  </p>
  <h3 id=      性能测试   

这里我们选择阿里云的   性能测试分服务进行压测。

  

测试配置如下:   
  
   Serverless实战——使用Rendertron搭建无头Chrome渲染解决方案”>
  <p>我们配置了100并发,测试6分钟,每分钟并发按照20%递增的规则进行压测。</p>
  <p>我们要测试的网址网站为:
  http://renderton.mofangdegisn.cn/render/https://www.example.com/</p>
  <p>该网址表示让rendertron请求
  https://www.example.com/这个网站的内容,并返回渲染结果。</p>
  <p>测试概览如下:</p>
  <p>
  <img src=Serverless实战——使用Rendertron搭建无头Chrome渲染解决方案