Nuxt 3@SSRのキャッシュ戦略

このブログにキャッシュを入れた

どうしてキャッシュが必要だったのか

このブログはそんなに頻繁に更新しないが、アクセス/ページ遷移のたびにNotion APIを叩きに行く作りになっている。Notion APIは500〜1000ms/requestくらいの遅さなので猛烈にストレスをかんじる。なんとかしたい。

Notion APIが遅いことは確認した。

何をキャッシュするか

ページコンテンツまるごと。

最初はAPIだけをキャッシュする作戦を考えたが、(当たり前だが)SSR時にキャッシュが効かなくて遅い問題がおこるので、APIだけというわけにもいかずまるごとキャッシュするしかなかった。

どうやってキャッシュするか

Nuxtの/server/middlewareかFirebase Hostingの設定でCache-Controlヘッダに何かを指定すればよい。middlewareではSSRされるコンテンツしかキャッシュできず、Hosting上のpublicな静的アセットがキャッシュの対象にならないので一元管理する意味でもFirebase Hostingの設定で全部やることにした。

実装メモ

とりあえずfirebase.jsonを次のようにした。

Hosting経由で返されるコンテンツを全部同一の設定でキャッシュさせている。SWRを理解するブラウザであればそれっぽい動きになるだろう。

時間設定は適当。どうせそんな頻繁に更新しないのでもっとキャッシュ長くてもいい気がする。