夏卡樵の開發日誌

什麼是rendertron

Rendertron is a headless Chrome rendering solution designed to render & serialise web pages on the fly.

Rendertron由Google Chrome團隊所開發，是基於node.js(puppeteer)的無頭瀏覽器SEO解決方案

• 官方Github
• 官方Demo page
  在URL欄輸入你的SPA站網址接著按Render & serialize，rendertron便會訪問你的網站，並且等所有網路請求都完成時返回渲染後的內容給你，我們可以透過右鍵 > 檢視網站原始碼來確認網站的內容確實有被渲染出來。

優點

• 適用於任何SPA前端框架
• 方便部屬，一個指令便可部屬至Google App Engine，也可使用官方的demo站(但官方不保證能一直使用)
• 配置簡單，只需配置反向代理

使用方法

我們透過官方範例及文檔可以得知render功能只需在/render這個路徑後加上欲渲染的網址，因此我們要做的事就是判斷爬蟲訪問我們網站時，反向代理到rendertron讓他把渲染完的內容提供給爬蟲。
假設我們的網站是https://my-app.com，當爬蟲爬我們網站時，實際上是訪問了https://render-tron.appspot.com/render/https://my-app.com/。

• 配置反向代理(這裡以nginx為例)
  編輯你的nginx host file: vi /etc/nginx/sites-enabled/default server內插入以下內容:

  server {
      # your other settings...
      location / {
          try_files $uri @prerender;
      }
      location @prerender {
  
          set $prerender 0;
  
          if ($http_user_agent ~* \"googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|XML Sitemaps Generator\") {
              set $prerender 1;
          }
          if ($args ~ \"_escaped_fragment_\") {
              set $prerender 1;
          }
          if ($http_user_agent ~ \"Prerender\") {
              set $prerender 0;
          }
          if ($uri ~* \"\\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)\") {
              set $prerender 0;
          }
  
          if ($prerender = 1) {
              rewrite .* /render/$scheme://$host$request_uri? break;
              proxy_pass https://render-tron.appspot.com;
          }
          if ($prerender = 0) {
              rewrite .* /index.html break;
          }
      }
  }
  

  這邊範例是使用官方提供的rendertron server，若你有自架rendertron請記得把domain改成自己的。
• 重啟nginx
  systemctl nginx restart

接著我們來測試看看是否有效吧

測試

剛剛我們的nginx config判斷了一大串的user agent啟用prerender，裡面包含了大部分主流的網頁爬蟲，我們只要把user agent改成其中一個來訪問網站就能模擬爬蟲。透過chrome的F12檢查工具可以自定義自己的user agent。

• 模擬手機裝置
  
• 切換模擬的裝置，點擊Edit來自定義裝置
  
• 新增裝置，device name可以隨便取
  添加後就能在裝置的下拉選單切換成Google Bot了，接著再來訪問我們的網站並檢視原始碼，就能看到原本SPA空空如也的原始碼如今也有內容了。

參考資料

• 偷米騎巴哥 前端框架如何解決SEO問題
• https://gist.github.com/justindavies/7421d1f112f5c1b606dd27f4fcd8a856\n