Prerender.io - 預渲染架構，提升AngularJS SEO

時間 2019-11-09

標籤 prerender.io prerender 渲染架構提升 angularjs seo 欄目系統架構简体版

原文原文鏈接

近些年來，愈來愈多的JavaScript框架（即AngularJS，BackboneJS，ReactJS）變得愈來愈流行。許多公司和開發人員使用這些JavaScript框架開發應用程序。這些框架有不少的優點： javascript

前端和後端獨立開發
JavaScript框架+RESTFUL的API（或微服務架構）
SPA(Single Page Application)
某種程度上有利於提升開發效率

可是使用JavaScript框架對前臺尤爲是須要支持搜索引擎的頁面是頗有問題的，這是由於咱們使用這些框架基本上都是基於虛擬元素或屬性和JavaScript綁定JSON對象，都是SEO不友好的。不少搜索引擎，社交媒體，爬蟲甚至不支持抓取JavaScript的網頁。前端

很慶幸的是，咱們可使用PreRender.io預渲染頁面（PreRender.io經過執行頁面上的JavaScript，而後呈現給搜索引擎爬蟲）。 java

什麼是PreRender.io預渲染

Prerender.io是基於Node.js的程序，它可讓你的JavaScript網站支持搜索引擎，社交媒體，而且它兼容全部的JavaScript框架和庫。它採用PhantomJS渲染JavaScript的網頁而後呈現爲HTML。此外，咱們能夠實現的prerender服務層來緩存訪問過的頁面，這將大大提升性能。node

PhantomJS是利用JavaScript API腳本化的Headless WebKit。它具備 速度快 和支持Native 的各類Web標準：DOM處理，CSS選擇器，JSON，Canvas和SVG。jquery

現已有不少prerender許多中間件（咱們能夠用它來實現應用程序內部邏輯的prerender庫）：git

你能夠找到從這個連接找到大多數的中間件： https://prerender.io/documentation/install-middleware。Apache和Nginx的是服務器容器級中間件，其餘都是應用層面的中間件。 angularjs

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

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請求來自普通用戶，將流量重定向到應用程序。應用程序將執行並返回輸出到負載平衡的代理。