基於 puppeteer 的高性能 SPA SEO 解決方案

這是什麼?

這是一個高性能的基於puppeteer的SSR方案, 他使用Headless Chrome從網頁中生成html,而後以http的方法返回html內容

解決了什麼問題

不少公司和開發者使用JavaScript框架(包括AngularJS，BackboneJS，ReactJS, VueJS)開發應用程序和網站。但不少搜索引擎，社交媒體，爬蟲不支持抓取JavaScript的網頁，也就沒法作網站SEO。

經過UserAgent判斷,若是是來自於爬蟲, 則經過nginx(tomcat, Apache)等反向代理到本服務,則能夠把渲染好的html網頁內容傳遞給搜索引擎, 從而間接實現SEO,, 從而間接實現 SEO, 這樣,既能夠保持純粹的前端開始思路, 還能節省 SSR 形成的服務器負擔

也可使用在爬蟲, 生成網頁截圖,生成網頁PDF場景

github

https://github.com/zuoyanart/sparender

使用

git clone  
cd sparender
npm i
npm start

查看效果

http://127.0.0.1:3001/render?url=http://www.example.com

功能

• puppeteer鏈接池
• render併發限制
• log4j 日誌
• 已集成任務調度
• 生產，開發環境配置
• redis緩存
• 自動來路, 若是來自移動端則自動設置請求UA和viewpoint(使用iphoneX的環境參數)

性能對比

服務器: 12核16G
併發:10
運行時間:60S

項目配置: 不使用緩存, 屏蔽圖片,字體,多媒體等

請求地址: http://xxxx/render?url=https://www.baidu.com

	單次渲染	併發QPS
prerender	2054ms	5.05(已經有errors)
sparender	476ms	17.47

渲染方式對比

一下內容摘自 https://markdowner.net/articl..., 並根據本身經驗作了部分改動

方式	優勢	缺點
CSR 客戶端渲染	SPA 的優勢（用戶體驗較好）	* SEO不友好（爬蟲若是沒有執行js的能力，如百度，獲取到的頁面是空的，不利於網站推廣） 首屏加載慢（到達瀏覽器端後再加載數據，增長用戶等待時間
SSR 服務端渲染	SEO 友好, 首屏渲染快（可在服務端緩存頁面，請求到來直接給 html）	代碼改動大、須要作特定SSR框架的改動（通過咱們實踐、原有SPA代碼改動很是大） 丟失了部分SPA體驗 node 容易成爲性能瓶頸
服務端動態渲染（利用user-agent）	兼顧 SPA優勢同時解決SEO問題	須要服務端應用（但動態渲染只針對爬蟲、不會成爲性能瓶頸）

服務端動態渲染（利用user-agent）

爲了提升用戶體驗咱們用了SPA技術、爲了SEO 咱們用了 SSR、預渲染等技術。不一樣技術方案有必定差距，不能兼顧優勢。但仔細想，須要這些技術優勢的用戶，其實時不同的，SPA 針對的是瀏覽器普通用戶、SSR 針對的是網頁爬蟲，如 googlebot、baiduspider 等，那爲何咱們不能給不一樣用戶不一樣的頁面呢，服務端動態渲染就是這種方案。

基本原理： 服務端對請求的 user-agent 進行判斷，瀏覽器端直接給 SPA 頁面，若是是爬蟲，給通過動態渲染的 html 頁面(由於蜘蛛不會形成DDOS,因此這種方案相對於SSR能節省很多服務器資源)

PS： 你可能會問，給了爬蟲不一樣的頁面，會不會被認爲是網頁做弊行爲呢？
Google 給了回覆：

Dynamic rendering is not cloaking
Googlebot generally doesn't consider dynamic rendering as cloaking. As long as your dynamic rendering produces similar content, Googlebot won't view dynamic rendering as cloaking.
When you're setting up dynamic rendering, your site may produce error pages. Googlebot doesn't consider these error pages as cloaking and treats the error as any other error page.
Using dynamic rendering to serve completely different content to users and crawlers can be considered cloaking. For example, a website that serves a page about cats to users and a page about dogs to crawlers can be considered cloaking.

也就是說，若是咱們沒有刻意去做弊，而是使用動態渲染方案去解決SEO問題，爬蟲通過對比網站內容，沒有明顯差別，不會認爲這是做弊行爲。

至於百度,請參考
豆丁網是在作黑帽 SEO 嗎？

經過user-agent判斷，將Baiduspider定向到http頁面

基本的解釋是:

的確從單一feature來說，會比較難區分cloaking型的spam和豆丁類的搜索優化，可是搜索引擎判斷spam絕對不會只用一個維度的feature。docin這樣的網站，依靠它的外鏈關係、alexa流量、用戶在搜索結果裏面的點擊行爲等等衆多信號，都足以將其從spam裏面拯救出來了。

況且，通常的spam確定還有關鍵詞堆砌、文本語義先後不搭、link farm等等衆多特徵。總之antispam一門綜合性的算法，會參考不少要素，最後給出判斷。

實在不行了，還能夠有白名單做爲最後的彌補手段，拯救這批大網站是沒什麼問題的啦。