React app SEO優化之預渲染

閱讀本文只須要2分鐘

搜索引擎真的須要已經預渲染的應用嗎？

谷歌已經明確表示，他們會在抓取你的網站以前運行你的JavaScript代碼。準確地說，他們的爬蟲(crawler)中運用 Chrome 41瀏覽器打開網站，和真實用戶用瀏覽器打開同樣！可是還有其餘搜索引擎和社交媒體網站可能並不會這麼作。

我知道人們太關心搜索引擎優化了，老是試圖儘量地提升。很天然的，每一個人都想在不運行任何JavaScript的狀況下直接顯示搜索引擎的內容。這不是一個壞主意，相信不少人都這麼嘗試過。

*這不只有利於搜索引擎優化 *，並且還具一些性能優點。瀏覽器沒必要等待JS文件加載後纔開始渲染，首次有效渲染(First Contentful Paint)的時間會更短。

React App 如何預渲染？

原理其實很簡單，在咱們使用npm run build構建React App後，咱們用真實瀏覽器渲染build目錄(一般是index.html), 而後獲取產生的HTML代碼保存到一個文件中，只是全部的內部頁面都須要重複相同的操做。

感謝react-snap 讓這一切變得簡單。

1. 在 dev 依賴中安裝  npm i -D react-snap
2. 在package.json 的 scripts 中添加"postbuild": "react-snap"
3. 運行npm run build

What it will do is after the normal build, it will run react-snap which will render them in a Puppeteer browser, scrape content and generate new build.

在build以後，將運行react-snap，在無頭瀏覽器(Puppeteer browser)中渲染，抓取內容併產生新的build。

{
  "scripts": {
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "skipThirdPartyRequests": true
  },
  "devDependencies": {
    "react-snap": "^1.23.0"
  }
}
複製代碼

和原做者同樣，我在嘗試react-snap的時候，也碰到了一些問題，例如著名的'Protocol error (Runtime.callFunctionOn): Object reference chain is too long' }, 通常在官方問題都能找到相應的解決方案，或者你選擇StackOverFlow。

因此當咱們在使用第三方腳本的時候，應該儘量對他們多一些瞭解，好比有哪些限制或者是options， 請參考文檔。

原文地址：coffeencoding.com/prerender-r… 感謝做者 Gijo Varghese