この記事はNext.js Advent Calendar 2019 13日目の記事です。
Reactで描画していたページの検索流入が低下したのをNext.jsで改善した話です。
はじまりはいつも突然に
諸般の事情で簡易的なスクレイピング対策として、 HTML + React.js で作成された BtoB 向けの Webサイトがありました。
Google様の言いつけを守りLighthouseの Performance Scores のSEOは100で運用していました。
コンテンツの充実化を図り、検索流入も右肩上がりで大変喜ばしい結果になっていました。
しかし、その日は突然やってきました。
Google様に嫌われてしまい検索流入がガクッと1/5まで落ちてしまったのです。
ご機嫌取り
プロジェクトのメンバーは大慌てです。
「最近のリリースで変更点ありましたっけ⁉」
「いや、コンテンツの追加しかしてません。SEO対策はできているはずです」
「Googleのクローラーの仕様変更ですかね・・・」
そこで、実際にLighthouseの結果を確認してみると変化は見られませんでした。
しかし、Fetch as Google の結果を見るとReactを使って動的に描画していたコンテンツの中身が上手く表示されていませんでした。コンテンツ描画前のスケルトンだけが虚しく表示されており、コンテンツの中身が無いサイトとして認識されてしまっていたのです。
「Reactの描画待ってくれていませんね。これ・・・」
「静的なページにはしたくないんだよねぇ」
「なにか打つ手がないか探してみます」
そんなときにNext.jsの噂を聞き、Next.jsならば既存のReactの資産を活かしつつSSRへ移行して、静的に出したくない箇所は Dynamic Import で動的に描画できそうと目処が立ちました。
最終的な構成は、AWS Lambda を通して React + Redux を Next.js で SSR する構成に変更しました。
加えて、Amazon CloudFront を使ってコンテンツを配信し、パフォーマンス改善も図りました。
「これで、Googleのクローラー向けにやれることはやりましたね」
「あとは、クローラー様の判断を待ちましょう」
Next.jsでSSRした結果
Next.jsに移行した結果、検索流入はリリースした次の日から右肩上がりに変わりました。
Lighthouse の結果も向上し、コンテンツのファーストビューまでの時間も40％向上しました。
検索流入数は、1/5まで落ちたところから7倍程度まで上昇と移行前の最大値をあっという間に更新する結果となりました。
おわりに
SEO対策は前提でしかなく、コンテンツの中身をクローラーが滞りなく解釈できる形で出してあげることが大事だと痛感しました。
Next.jsは既存の React コンポーネントをそのまま移行できたので本当に便利でした。
SPAで作っているサイトやReactで動的に描画しているサイトの方の参考になれば幸いです。