Ciao Space
文章
專案
聯絡我們

ciao-ssr

2018/08/14

專案Github連結：https://github.com/ciao-chung/ciao-ssr

開發時間：2018年8月

 

開發動機

從開始碰Vue之後

我就一直不斷的研究SSR(Server Side Render)的方式

從一開使用PhantomJS、接著改成現成的Prerender

到現在變成用Puppeteer來做SSR

我一直再追求最好的SSR方式

畢竟現在的Search Bot不是每個都有能力爬Single Page Application

 

用PhantomJS的時期

最一開始我是用PhantomJS來做SSR

不過因為PhantomJS算是很老的headless瀏覽器

所以它的render速度比較慢

而且它並不支援ES6

開發的時候還要打補丁

不然Phantom可能在某個不支援的js就掛了

 

改成Prerender

Prerender是一個Open Source的SSR Service

除了可以付錢給他們讓他們幫你做SPA的Prerender

也能自己fork出來做SSR

Prerender原本底層的crawler就是用PhantomJS

後來Chrome推出headless模式

他們也把底層的crawler改成Chrome Headless

 

這就是我從PhantomJS改成Prerender的原因

Chrome Headless就是可以一個沒有圖形界面的Chrome

我們就可以把這個Chrome Headless拿來做SSR爬網站

Chrome對於js的支援度比PhantomJS好太多

而且Prerender又整包寫好實在很方便

所以我就直接跳槽到Prerender

 

自己用Puppeteer做SSR

雖然Prerender真的很方便

但是它的一些相關設定是用要export ENV來設定

我個人卻是比較習慣用一個json來處理所有設定

另外我也想自己用Chrome Headless實做SSR

所以最近就稍微研究一下Puppeteer

然後開始著手寫這個SSR Service

 

Server Side Render的流程

在使用這個SSR Service之前

我們要先了解一下SSR的流程

SSR.png

 

Icon Credit ( Icon版權 )

 

主要功能

  • 可使用設定檔限制允許的網域來源, 避免直接變成公開的prerender服務
  • 可使用設定檔設定cache機制, 避免機器的負載過重, 畢竟一般小網站搜尋引擎爬的頻率就滿高的

 

其他可客製化的設定

  • port: 預設為3000
  • host: 預設為localhost
  • timeout: 如果Client端在這個timeout內沒有主動call SSR.done該服務就會自行呼叫puppeteer做SSR, timeous預設為5000(ms)

 

主要相依套件

  • express: 最熱門的Node.js web server framework
  • cache-manager: 一個實做cache機制的Node.js套件
  • puppeteer: 本服務的主角, 拿來爬web內容的Chrome Headless

 

更多設定、介紹請看我的Github Repo