【React/SSR】サーバーサイドレンダリングの方法

Google Search Consoleでなかなかインデックス登録されない

サイトマップは正しいものを送信しているし、これといった警告もないのになかなか登録されない時間が続きました。
初期のレンダリング時間(ページが表示されるまでの時間)が、インデックスに関係があるという記事を読んだので、その時間を以下のツールで検証してみました。
PageSpeed Insights

初期レンダリング時間がえげつない

f:id:saegusa41010:20190314173313p:plain
処理速度

これではクローラさんも諦めますね笑
ということで、レンダリング速度を上げるためにSSR(サーバーサイドレンダリング)することにした。

SSRの種類(hypernova vs next js)

調べてみると、Rails+ReactでSSRする方法が大きく分けて2つあるようなので、それぞれの特徴をまとめました。

hypernova

この記事にとてもわかりやすくhypernovaの特徴が書かれていました。
RailsでReactをサーバサイドレンダリング(use Hypernova by airbnb) - Qiita
特徴は
- サーバー側(rails)で主にSSRする
- metaタグ(Head内の)がめんどくさそう
- 移行の際Reactはそのままで書き換えが少ない

next js

特徴を列挙すると
- js側でSSRする
- React Routerの進化系
- metaタグの作成が容易
- 移行するにはReactの構造ごと変える必要がある
などが挙げられる。

hypernovaでいこう

特徴の中の、移行にかかるコストを考えると、とりあえずhypernovaでSSRして行くことにした。
明日以降進めて行くので、具体的なやり方はその時書こうと思います。