サーバーサイドレンダリングしないReact SPAのSEO
Googleの検索対象になって、React SPAの本文部分を検索できるようにしたい。
そういう場合は
require('babel-polyfill') だけで十分するとこうなる
以上でした。
追記：babel-polyfillももう必要ない
2018年ごろ、Googleのクローラが更新された
2019年の間、この話題についてはもう全く議論の余地は無いと思っていたので追っていなかった
現在2020年11月
何もしてないのに3位から2位に上ってた
何もしてないのに上がるわけだから、やはりSSRは必須ではないと思う
やや詳しく
要求
専門的なSEO、つまり検索結果で1位になる方法とかは知らない
普通にクロール対象に入って、本文を認識してもらって、そこを検索できるようにしたい
Google botのJavaScriptエンジンが古い
今年(2017年)3月ごろにGoogle Search Consoleで、Cosenseがどのように解釈されているのか調べた
結果
Reactがレンダリングされてなかった
理由がわからない
Google botが見たスクリーンショットしか見えないので、エラーが見えない
エラー究明
未キャッチのエラーはstacktraceを全て画面に表示するようにした
print-all-error.jswindow.addEventListener('unhandledrejection', reason => {
console.error('Unhandled Rejection', reason) // これをconsoleではなくHTMLに表示する
})原因わかった
Array.prototype.includes とか、色々なメソッドが無いGoogle botはだいたいChrome v45あたりよりちょっと前を使っているようだ
browserstackで古いchromeでのエラーと比べて、だいたいv45ぐらいだと思った
なんかしょうもないエラーばっかりで、React自体はレンダリングしてくれていた
Google bot側に色々なJavaScriptの関数が欠けているだけだった
babel-polyfillを食わせる
普通にbrowserify/webpackする時にbundleしてもいい
今回はCDNから読ませることにした
Google botがReactのレンダリング成功した！！
ちゃんと普通にReactでHTML書いてたら、Googleが本文を認識してくれて、検索結果にでてくるようになった
Aタグも辿って全ページ見て回ってくれてる
clickしたらpushStateで移動するだけではなく、Aタグも付けておいてよかった
<a onClick={e => e.preventDefault()} href="path/to/page">link</a> みたいにするCSSのhoverで表示切り替えている部分が出ちゃってるの直したい
行毎の更新時刻の部分
CSS hoverじゃなくReactで、mouseoverした時だけDOMに出すように修正すれば消えるはず
直った(2018/1/23)
これはサーバーサイドレンダリングするしかない
普通にSPAのHTMLの
<head> とかに書くここもReactで書くなら
サーバーがexpressならexpress-react-views
を使うと良い
これはサーバーサイドレンダリングするしかない
SPAのサーバーサイドレンダリングの意義
どうしてもファーストビューを高速化したいなら、まあやってもいいのでは？
でも実装に縛りができて難しくなるので、開発速度は確実に低下する
今後作る全てのReactコンポーネントが、初期stateからのpropsバケツリレーできっちり表示できるようにやる必要がある
できなければ、サーバーエラーになる
renderToString は引数1つしかないので、下の方のどこかの子コンポーネントでエラー起きたら止まるそこだけ例外扱いにして、renderできた部分だけ出す方法は無い
React16から子コンポーネントのエラーを親でcatchできるようになるらしい
これでなんとかなるかもしれない？
俺はsemiraraでサーバーサイドレンダリングやって懲りた
CPUも消費する
renderToString 自体はそこまで重い物ではないと思うがこれまでclient数で分散されていた処理を、こちらのserverで一手に引き受ける事になるわけで
母数が多いと塵が積もってしまう
それでいいならやればいい
ファーストビューの速度より優先する物が無いならやれば良いと思う
単にググって出たいだけならbabel-polyfillでも食わせておけ