create-react-appで作り直したうちのサイトのOGPがずっとおかしかったのをやっと直しました。

Prerenderって？

SEOやOGP向けに事前にページをレンダリングしておく技術です。ざっくりですが、とりあえずこれくらいの認識でOKです。

CMSを使っている場合は基本不要なのですが、React / Angular / IonicなどでSPAとしてサイトを構築してる場合は、サーバー側で記事データなどを取得しないので必要になってきます。

Netlifyでは、SettingsからPrerenderingの設定を有効化するだけで、24 ~ 48時間周期でレンダリングしてくれるようになります。

なぜか動かない

prerenderのドキュメントなどでは、「APIからデータ取ってくる場合は、window.prerenderReady をtrueにする処理を明示的に書くといいよ」とあったので、その通りにしてたのですが、なぜかでない。

おのうえさんからの情報で、「NetlifyのはまだPhantomJS使ってるから、Polyfillいるかも」ということだったので、スクリプトも借りてテストしてみました。

Mapがない

テストした結果がこちら。

ERROR: ReferenceError: Can't find variable: Map
TRACE:
 -> https://localhost:3001/static/js/bundle.js: 74239
 -> https://localhost:3001/static/js/bundle.js: 74568 (in function "./node_modules/react/cjs/react.development.js")
 -> https://localhost:3001/static/js/bundle.js: 679 (in function "__webpack_require__")
 -> https://localhost:3001/static/js/bundle.js: 89 (in function "fn")
 -> https://localhost:3001/static/js/bundle.js: 74588 (in function "./node_modules/react/index.js")
 -> https://localhost:3001/static/js/bundle.js: 679 (in function "__webpack_require__")
 -> https://localhost:3001/static/js/bundle.js: 89 (in function "fn")
 -> https://localhost:3001/static/js/bundle.js: 119837 (in function "./src/index.js")
 -> https://localhost:3001/static/js/bundle.js: 679 (in function "__webpack_require__")
 -> https://localhost:3001/static/js/bundle.js: 89 (in function "fn")
 -> https://localhost:3001/static/js/bundle.js: 122695
 -> https://localhost:3001/static/js/bundle.js: 679 (in function "__webpack_require__")
 -> https://localhost:3001/static/js/bundle.js: 725

どうやらcreate-react-appに同梱されているPolyfillはfetchやPromiseなどの一部だけらしく、そのままだと足りないケースもあるとのことです。

Babel-polyfillを追加する

原因がわかれば対応もできます。まずはPolyfillライブラリを追加します。

$ yarn add babel-polyfill

そしてsrc/index.jsで読み込ませます。

import 'babel-polyfill'
import React from 'react'
import App from './App'

１行目に書かないとうまく動かなかったので要注意です。

この状態でデプロイすれば、prerenderするタイミングを任意で指定できるようになります。

個別にPolyfillを追加する

今回はbabel-polyfillを使いましたが、個別にPolyfillを入れる方法もある様子です。

https://www.redbitdev.com/polyfill-with-create-react-app/

「MDNのドキュメントにPolyfill載ってるから、それを読み込ませろ」ということみたいですね。

babel-polyfillは１度しかよまれないらしいので、上の手が使えない場合はこちらのやり方が良さそうです。