ブログでAstroのビルドを超高速化した話
はじめに
これまで自分はブログの技術スタックをRemix + MicroCMS(Cloudflare Pages)にしていたのですが、そうするとAdSense広告が表示されないバグが発生してしまったので、思い切ってAstro + MicroCMS(Cloudflare Pages)にしてみました。
ただ、それでも一つ面倒な問題が発生しました。
それが「ビルド時間」です。
元々RemixはSSR限定のフレームワークであったためビルド時間がとても短かったのですが、Astroは全部HTMLに変換してくれるのである程度の時間はかかってしまいました。
それもCloudflare Pages側で一からビルドさせると、Astroのビルドだけで73秒もかかっていたんです。
しかも致命的なのが、ページ(投稿)が増えるごとにビルド時間も肥大化して行くこと。
MicroCMSで投稿したらすぐにビルドするようなアーキテクチャにしたかったので、このような事態は流石に避けたい。
そこで、今のビルド時間から超爆速にして、恒久的にビルド時間を不変にする方法を思いついたので共有します。
1. ビルド時間を超爆速にする方法
これはキャッシュという方法を用いました。
関数は以下です。
let cachedData = {}
const cache = async(key, handler) => {
if(!(key in cachedData)){
cachedData[key] = await handler()
}
return cachedData[key]
}
内容としては簡単で、関数の戻り値をキャッシュして、２回目からは実行しないようにしているんです。
ここに例えば毎記事の下にある最新の投稿を取得する関数とかを入れておけば、毎記事でAPIリクエストをすることなく、使い回すことができます。
結果的にMicroCMSの転送量も削減することができてとってもお得です。
ただ、これだけやってもビルド時間は十秒〜数十秒くらいしか変わりませんでした。
また、これだけだと結局投稿数が増えるごとにビルド時間も増えていきます。
あ、やばいなこれと思って、もう一つの画期的な案を思いつきました。
2. 投稿内容も全てキャッシュする
今さっきの関数を使って、まずMicroCMSで全投稿の内容をAPIから取得して、キャッシュします。
そうすれば２回目からはそのキャッシュ内容を見るので、簡単な仕組みですがリクエスト数もビルド時間も削減することができます。
実際、これでビルド時間が今さっきの73秒から3秒になりました。
3秒速くなりましたとかじゃないです。3秒になりました。(迫真)
結論: キャッシュは大事
いちいちリクエストしてると色々膨大になってくるので、Astroとか使う時はちゃんとキャッシュしましょう。
自作関数でも意外といけます。
おわりに
ちなみになんですが、最近ブログのPV数がすごく減少しているため、みてくれると嬉しいです。
生物学からハッキングまで、色々な記事をのんびりと書いています。
Discussion