ポートフォリオをGatsby.jsから移行しようとしたら、ブラウザのローカルキャッシュが消えなくて困った話
はじめに
3年近く放置していたポートフォリオをリニューアルしたのですが、本番環境のドメインからアクセスすると、真っ白な画面が表示されるだけで、ページがレンダリングされないという問題に直面しました。この記事ではその原因と、どのように解決したかを説明します。
移行前と移行後の環境
Webフレームワーク
Gatsby.js => Astro.js(SSR + SSG)
View
React.js => Astro.js
ホスティング先
Vercel => Cloudflare Pages
CDN・ドメイン管理
Vercel => Cloudflare
実際に起きた問題
- 以前自分のポートフォリオを読み込んだブラウザでは、Cloudflare上に載せたAstro.jsで作ったポートフォリオが読み込まれない。
- Gatsby.jsのHTMLが一部読み込まれるが、Reactのレンダリングはされない。(Vercelからの配信は止まっているため)
- 開発者ツールのNetworkタブからHTMLファイルについての情報を見ると、Vercelから配信されていると書かれている。
- ブラウザ設定から履歴・Cookieの削除をすると消える(ハードリロードでは消えない)。
試してみたこと
Vercelのプロジェクトの削除
すでにドメインの紐付けは解除していたが、プロジェクトは残っていたので削除してみたが効果はなかった。
Cloudflare上のキャッシュのパージ
サイト移行の1ヶ月前くらいにドメインだけCloudflare上に移管していたので、一応キャッシュをパージしてみたが同じく効果はなかった。
キャッシュバスティング
クエリパラメーターを上書きすることで、新しいページとして読み込ませようとしたが効果はなかった。
原因
Service Worker
gatsby-plugin-offlineという、Gatsby.jsアプリをPWA化するためのプラグインが入っていたのが原因で、Gatsby.jsでは読み込みを早くするためこの機能を使ってるようだが、Service Workerは単なるブラウザキャッシュとは違うので、キャッシュバスティングでローカルキャッシュを削除しようとしても意味はなかった。
解決策
Clear-Site-Data: "storage"ヘッダを付与
Service Workerをブラウザに削除してもらうために、Clear-Site-Data: "storage"ヘッダをCloudflareのTransform Rulesに実装した。
手順
1.Modify Response Headerというタブに移動し新しいルールを作成する
2.全てのリクエストのヘッダーにClear-Site-Data: "storage"ヘッダを付与する
これで、以前のポートフォリオのService Workerを保持しているブラウザでも最新のデータが読み込まれるようになりました。
まとめ
普段フロントエンドを触っていても、Service Workerにはほとんど触れたことがなかった上に、3年近く触っていなかったプロジェクトだったのもあり、Gatsby.jsにPWA化の機能をつけていたことも忘れていた(今思うとなんでつけたのかよくわからない)ので、解決策を見つけるのに結構時間がかかってしまいました。
Gatsby.jsから移行される方はgatsby-plugin-offlineが現在のプロジェクトに入っていないか？また、入っていた場合は必ずService Workerを削除するようにしておくとスムーズに移行できると思います。
参考
Discussion