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

news/2024/5/10 18:21:54/文章来源:https://blog.csdn.net/weixin_30613433/article/details/96076464

近些年来，越来越多的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请求来自普通用户，将流量重定向到应用程序。应用程序将执行并返回输出到负载平衡的代理。