Chrononglyph

#7690

複雑怪奇なキャッシュ

2025/01/04今日の出来事webサイト更新作業

年始のクリエイティブ作業フィーバーはいよいよピクチャレ大会開発にも飛び火し、
直近で作りたかった機能を一通り実装できるところまでいきました。なかなかの達成感。
ただし、リリースのためには最低でも総合ランキングの読み込みが遅すぎる件を解決したく、
これがブースト状態のいまですらなかなか着手し難いほど闇が深いので困っています。

このサイトの開発に使っているフレームワークはフロントエンドがNext.js、バックエンドがLaravelで、
どちらにもキャッシュの仕組みがあります。
総合ランキングが全ユーザーの各記録について処理する都合上とんでもなく重くなってしまうので、
これまではキャッシュの活用によって高速化を図っていました。
しかし、どうもキャッシュしてもなお重いんですね。

キャッシュの種類には、ページを静的（Static）なHTMLに変換してサーバーに保存しておく方法、
バックエンドへのリクエスト結果を専用サーバーに保存しておく方法、
フロントエンドへの出力結果をエンドユーザーのストレージに保存する方法などがあります。
基本的にピクチャレ大会の開発方針としては、ページをHTML変換する方法を主流として使ってきました。
これはユーザーも任意のタイミングでキャッシュを削除できるようなボタンの実装も可能なため、
ランキングというデータの形態にマッチしているのではないかと考えたからです。

ただ、ややこしいことに総合ランキングではAPIを保存する方法も併用しています。
あまりにもバックエンドの処理が重すぎるからですね。
そしてさらに厄介なことに、「ページ」単位でキャッシュする設定をしてはいるものの、
その子要素であるコンポーネント内部でまたサーバーへのリクエストを行っているという構造の都合上、
そのコンポーネントに関してはキャッシュが効いていないことが判明。
しかも、このコンポーネントこそがランキング本体で一番処理が重い部分です。

総合ランキングは移転プロジェクト初期に作った部分ということもあってやや難解で、
なぜページのバックエンド処理部分（getStaticProps）でAPIを実行していないのか謎ですが、
いずれにしろかなり抜本的に構造を変えないと解決できなさそうです。
実家帰省も明日で最終日、明日でこれが解決できればいいんですが……。
まあ、力尽きたらそのときは本家ブログ改修の方に戻ることにしています。とにかくやることはたくさんある。

そしていま一番大事なのは、このモチベーションを東京に戻ってからも維持すること。
去年も思い返せば年始の実家帰省中は開発作業がとても捗っていました。
が、終電逃しのトラブルやら年度末繁忙期やら生活の基礎が揺らいだことで崩れてしまい、
結果的には東京に戻ってからはむしろクリエイティブな作業が普段より遠ざかっていました。
今年は同じ轍を踏まないようにしたいところ。
その上で、この年始に幕を切った
①ピクチャレ大会開発、②本家ブログ開発、③ゲーム開発チュートリアル、④お絵描きチュートリアル
の４点については少しずつでもいいので歩みを止めないようにしていけたらなと。
そして①②の2025年最初のアプデはなるべく早くクリアしてしまいたい。