本ブログのレスポンスがかなり遅かったので調べ始めた

本ブログのレスポンスがかなり遅いことは最初から気になってました。たまに5秒以上もかかるレベルの致命的な遅さです。慣れていないのにApp Routerを使っているとか、クライアントサイドコンポーネントに依存しているChakra UIを使っているとか、middlewareで多言語対応しているとか、ページングを実装してないとか、思い当たる節はいくつもあったのと、別記事に書いている「とりあえずスマホアプリをリリースする」話を早く進めたかったのでちょっと後回しにしちゃってました。

react-share でWarningが出ていた

Netlifyが日本からだと遅い なんて話もあって、まあそもそも無料でここまで利用させて頂いているだけで大感謝ですし多少はどうしようもないかなと思いつつ、PF変えたりする前にさすがに何かやるべきことがあるだろうと思ってログを眺めていたら、以下のWarningが気になりました。react-shareを使っている箇所が原因のようです。

next.js Icon: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

react-share が defaultprops を使っているらしいことが問題になっている様子。

これがパフォーマンス低下の原因になっているとは思いませんでしたが、localでもたまに数秒かかったりしていて、試しにreact-shareの実装部分をコメントアウトしてみたら早くなったように見えたので、改善して損はないかなと思いました。

そもそもスマートフォンのブラウザからX(Twitter)にシェアする際にボタンが上手く機能していなかった問題もあったので、この際置き換えようと思いました。

next-share に置き換えてみる

「react sns share」とかでググるとほぼ全ての記事で react-share が使われていましたが、代替を探してみたら next-share というパッケージがありました。直近でも更新されていてメンテも大丈夫そうだったので置き換えてみました。

react-share を remove して、next-share を add します。

$ yarn remove react-share
$ yarn add next-share

ソースコードの修正は以下のみでした。明らかに react-share との互換性を意識して作られているようです。

before

import {
  FacebookIcon,
  FacebookShareButton,
  HatenaIcon,
  HatenaShareButton,
  LineIcon,
  LineShareButton,
  TwitterIcon,
  TwitterShareButton,
} from 'react-share'

after

import {
  FacebookIcon,
  FacebookShareButton,
  HatenaIcon,
  HatenaShareButton,
  LineIcon,
  LineShareButton,
  TwitterIcon,
  TwitterShareButton,
} from 'next-share'

その他細々した修正も含めて以下でPRを上げました。

https://github.com/tkugimot/nextjs-microcms-blog-handson/pull/22?w=1

デプロイ後に確認

まず当然ですがWarningは出なくなりました。速度についてはちゃんとパフォーマンステストをしたわけではないので正確なことは言えませんが、ブラウザで確認する限りは大体は300ms程度で返しています。ただやっぱりたまに3~4秒かかるし、5秒以上かかるパターンもありました。

レスポンスが遅い問題について

react-shareを使っていた時はlocalでも遅かったですが、対応後はlocalでは100~300ms程度で全て返却しています。つまり遅い問題はデプロイ後のみに起きているので、原因はNetlifyサーバーとの通信部分になります。まあ、そもそも無料でここまで利用させて頂いているだけで大感謝なのである程度は仕方ないです。今後副業で収益を上げられるようになったら優先的に投資しようと思います。