開發動機

從開始碰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的流程

Icon Credit ( Icon版權 )

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

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