rendertron.jpg

Rendertron 是由 Google Chrome 團隊開發的專案,

可以用來解決任何 bot (網路爬蟲) 無法讀取到 PWA 網頁需要額外 render 或者需要透過 javascript 執行產出的內容。

(例如,這類網站分享貼文到 facebook/Twitter 時,會遇到無法被 bot 正確取得內容的問題)

Rendertron以獨立的HTTP Server方式運作,並且是以 Headless Chrome 的方式來 render 請求的頁面

他會透過 auto-detecting 自動檢測加載函式,從頁面的載入(onload)相關的事件來監控內容何時會載入完成,

確保你的PWA網頁內容都能順利載入,並且有足夠的時間(10s)可以呈現之後,才會回應給請求來源。

使用 Rendertron 時,要在App當中設定 Rendertron middleware 來監控 proxy 請求。

並且,這樣的設定可以兼容於 client side 的技術,包含 web components.

Middleware

底下列出的是可以使用 Rendertron service 的服務

  • Express.js middleware
  • Firebase functions (Community maintained)
  • ASP.net core middleware (Community maintained)

API

Rendertron 提供了Render 與 Screenshot API

Render API - 可以render你的頁面,並且進行相關處理

/render/<url>

Screenshot API - 可以用來輸出畫面的方式來驗證你的頁面是否有render正確

/screenshot/<url>

預算有限度

Rendertron 等待的內容載入的時間限定在 10 秒,如果在 10 秒內沒有將內容載入完畢,就會終止等待,將內容返回給請求來源。

rendering flag

Rendertron 預設會以頁面載入相關的事件為依據,等待載入事件執行完畢後,就會回覆請求。

但是,對於一些以非同步載入的內容,可能就會遺漏掉。

對此,Rendertron提出了一個 rendering flag 解決方法,讓你可以明確的讓 Rendertron 真正的完成時間點。

做法如下:

首先在初始化時,要先設定一個 windows.renderCompolete flag 為 false

  window.renderComplete = false;

當你確定內容都加載完畢,再將 flag 設定為 true,讓 Rendertron 知道可以返回請求

  window.renderComplete = true;

回覆HTTP狀態

可以透過下方作法,來回覆目前內容的HTTP狀態

<meta name="render:status_code" content="404" />

安裝及發佈方式

可直接參考官方操作流程