Prerender.io - 预渲染架构，提升AngularJS SEO

近些年来，愈来愈多的JavaScript框架（即AngularJS，BackboneJS，ReactJS）变得愈来愈流行。许多公司和开发人员使用这些JavaScript框架开发应用程序。这些框架有不少的优点：

• 前端和后端独立开发   
• JavaScript框架+RESTFUL的API（或微服务架构）
• SPA(Single Page Application)
• 某种程度上有利于提升开发效率

可是使用JavaScript框架对前台尤为是须要支持搜索引擎的页面是颇有问题的，这是由于咱们使用这些框架基本上都是基于虚拟元素或属性和JavaScript绑定JSON对象，都是SEO不友好的。不少搜索引擎，社交媒体，爬虫甚至不支持抓取JavaScript的网页。  

很庆幸的是，咱们可使用PreRender.io预渲染页面（PreRender.io经过执行页面上的JavaScript，而后呈现给搜索引擎爬虫）。

什么是PreRender.io预渲染

Prerender.io是基于Node.js的程序，它可让你的JavaScript网站支持搜索引擎，社交媒体，而且它兼容全部的JavaScript框架和库。它采用PhantomJS渲染JavaScript的网页而后呈现为HTML。此外，咱们能够实现的prerender服务层来缓存访问过的页面，这将大大提升性能。

PhantomJS是利用JavaScript API脚本化的Headless WebKit。它具备  速度快  和  支持Native 的各类Web标准：DOM处理，CSS选择器，JSON，Canvas和SVG。

现已有不少prerender许多中间件（咱们能够用它来实现应用程序内部逻辑的prerender库）：

• NodeJS Express
• Ruby on Rails
• Java
• ASP.NET MVC
• PHP Zend Framework
• Apache
• Nginx.

你能够找到从这个连接找到大多数的中间件：  https://prerender.io/documentation/install-middleware。Apache和Nginx的是服务器容器级中间件，其余都是应用层面的中间件。

官方网站是：  https://prerender.io/。

GitHub的网址：  https://github.com/prerender 

你能够到个人github地址下载我写的ASP.NET MVC 和ASP.NET Core的中间件： https://github.com/dingyuliang/prerender-dotnet

或者用Nuget下载我写的ASP.NET MVC 和ASP.NET Core中间件： 搜索Prerender, https://www.nuget.org/packages?q=prerender 

     1. ASP.NET MVC: 

Install-Package DotNetOpen.PrerenderModule

     2. ASP.NET Core: 

Install-Package DotNetCoreOpen.PrerenderMiddleware

     3. PrerenderReady jQuery: 

Install-Package DotNetOpen.PrerenderReady.jQuery

     4. PrerenderReady AngularJS: 

Install-Package DotNetOpen.PrerenderReady.AngularJS1

 

PreRender.io 预渲染解决方案

根据PreRender逻辑，我以为有3个不一样的级别的解决方案来实施prerender.io

• 方案1：应用层

           经过中间件实现对应用程序级别prerender.io逻辑（即Express NodeJS中间件，Ruby on Rails的中间件，ASP.NET MVC中间件，...）

• Http请求到达
• 应用程序将检查Http请求是否来自爬虫（User Agent）。
• 若是请求来自爬虫，那么appliaction将调用prerender服务，把原来的URL做为查询字符串。 
  • 预渲染服务将调用应用程序 
  • 应用程序返回原始的HTML用JavaScript逻辑的prerender服务
  • 预渲染服务将执行内部HTML的JavaScript(与浏览器相似)
  • 预渲染服务将最终的HTML返回到应用程序。
  • Appliaction将最终的HTML返回到浏览器。
• 若是Http请求来自普通用户，应用程序将执行输出，并发送回浏览器。

• 方案2：服务器容器级别
  

            经过使用URL重写中间件，实施服务器容器级别prerender.io逻辑（i.e. Apache，Nginx，IIS）。

• Http请求到达
• 服务器容器（如Apache，Nginx，IIS）将检查Http请求是否来自爬虫（User Agent）。
• 若是Http请求来自爬虫，而后重写URL（将原始URL做为查询字符串）预呈现服务。 
  • 预渲染服务将调用应用程序 
  • 应用程序返回JavaScript逻辑原始的HTML 
  • 预渲染服务将执行内部HTML的JavaScript，与浏览器相似
  • 预渲染服务将返回最终的HTML服务器容器（Apache，Nginx，IIS）。
• 若是Http请求来自普通用户，而后将流量重定向到应用程序。应用程序将执行并返回输出到服务器容器。

• 方案3：网络级别
  

            咱们经过负载均衡的代理实现网络级prerender.io逻辑，i.e. HAProxy：

• Http请求到达
• 负载均衡代理会检查Http请求是否来自爬虫（User Agent）。
• 若是Http来自爬虫，而后将流量重定向（将原始URL做为查询字符串）预呈现服务。 
  • 预渲染服务将调用应用程序 
  • 应用程序返回包含JavaScript原始的HTML 
  • 预渲染服务将执行内部HTML的JavaScript，与浏览器相似
  • 预渲染服务将最终的HTML返回给负载平衡的代理。
• 若是Http请求来自普通用户，将流量重定向到应用程序。应用程序将执行并返回输出到负载平衡的代理。

 

解决方案比较

以上3种不一样的解决方案是在不一样的级别解决相同的问题，可是它们有着不一样的性能结果。

• 方案1：应用层

          该解决方案易于实施，易于调试，但它也加剧应用程序负载，由于应用程序须要等待的prerender服务调用的应用程序和执行JavaScript，这将须要大量的时间等待，而且等待时间取决于它的JavaScript逻辑的复杂性。所以，这种解决方案的瓶颈是应用程序。

          若是的prerender服务已关闭，会影响普通用户访问体验（长时间的请求预呈现服务，消耗应用程序和服务器容器资源）。

          推荐指数：1 

• 方案2：服务器容器级别

          这种解决方案利用URL重写逻辑来将负载瓶颈从应用级移到IIS级，这种方案提升了应用程序的灵活性。

          若是的prerender服务已关闭，会影响普通用户访问体验是（长时间的请求预呈现服务，消耗服务器容器资源）。 

　　　 推荐指数：2

• 方案3：网络级别

          这种解决方案将在最高水平经过使用负载平衡来实现，在网络级，所以，存在于服务器容器和应用程序无瓶颈，由于它移动到负载平衡。 

          有了这个解决方案，甚至的prerender服务关闭，也不会影响到普通用户的接入体验。 

          推荐指数：3

基于上述的基本分析，一般来讲，方案3比方案2更好，方案2比方案1更好。

性能问题

不管咱们将要使用那种解决方案，咱们总应该思考如何提升性能，由于执行JavaScript逻辑总会比执行服务器端逻辑花费更长的时间，并且不可预见。

在另外一方面，若是咱们只重定向爬虫的Http请求到预渲染服务，咱们不须要提供最新信息给爬虫，咱们可使用prerender的缓存服务来提升性能，咱们能够缓存爬虫访问过的页面12小时-1天。  

在接下来文章中，我将解释如何使用开源项目来实现的prerender服务.

 

Prerender.io相关

1. Prerender.io - 预渲染架构，提升AngularJS SEO
2. Prerender.io - 设置预渲染服务，为搜索引擎优化JavaScript
3. Prerender.io - 实施最佳实践
4. Prerender.io - 应用层中间件 - ASP.NET HttpModule
   
5. Prerender.io - 应用层中间件 - ASP.NET Core中间件
6. Prerender.io - jQuery和angularJS插件prerenderReady