今回のリニューアル概要はこんな感じ。さよならHeroku…👋

※ブンゴウメールはまだ未着手です。。。

ブンゴウAPI

技術構成

• Cloudflare（Workers/D1）
• TypeScript
• Hono
• Zod
• Prisma
• OpenAPI（zod-openapi/OpenAPIHono）

困ったこと

• Sqliteに慣れてなくてハマった
  • VARCHARがない（全部TEXT）
  • TRUNCATEがない（DELETE FROM ...）
  • …
• Zod（型）の取り扱いが大変だった
• API設計むずかしい
  • ページング
  • 一覧と詳細で返す内容が違う
    • フィールドをユーザーに選択させるか
    • スキーマをどう定義するか
  • orderをparamにどう持たせるか
• キャッシュの設定
  • middlewareで設定。基本更新されないので長めにキャッシュしてる
  • CacheNameはどう使われてるんだろう…？
  • いざとなったらCloudflare側でpurgeできる？

ブンゴウサーチ

技術構成

• Vercel
• TypeScript
• Next.js(AppRouter)
• TailwindCSS
• shadcn/UI
• openapi-zod-client

困ったこと

• ディレクトリ構成
  • routing(app)とcomponentをどう配置するか
    • app配下にcomponentを置くか、appはroutingだけに使うか（こっちにした）
    • https://zenn.dev/kiwichan101kg/articles/b44305e3049bac
• SSGできるまで苦労した
  • 動的パスなので、generateStaticParamsで事前にパスを生成しておく
  • それだけだとSSGされず、force-static宣言が必要だった
  • localでビルドしたらSSGされてるように見えたので、デバッグが難しかった
  • Vercelのビルド時間制限が45分なので全ページはビルドできず、ある程度人気ページに絞り込んでる
    • 時間は大丈夫なはずなんだけど初回ビルドはいつもコケる。re-runしたら通る
    • API側の問題もありそうなので、先にAPIのエンドポイントを叩いて回るといいのかもしれない。。
• サーバー/クライアントの概念が難しかった
  • ちょっと慣れた。ほぼサーバでいけた
  • 著者検索のところだけClientComponent＋ServerAction
• リポジトリ層がメソッド少ないので適当。増えたときにどう整理するか
• ページングの設計
  • 本当はクエリパラメータで持たせたかったけど、それだとclient componentになっちゃう？
  • /page/2 みたいな設計にして、2ページ目以降はSSGしない
• generateMetaDataが終わるまで画面描画が止められてしまう
  • いくらloadingとかsuspendしても、metaDataが生成されるまでresponseが返らない（ので画面がフリーズしちゃう）
  • 原理的にだめそう。PPRになったらできるかもとか言ってる（けどPPRはSEO的によくなさそう）
    • https://github.com/vercel/next.js/discussions/50104
• キャッシュの利用量
  • 無料枠超えちゃうかも。どうやって節約するかまだよくわかってない
• PageSpeedInsightで高得点が取れない。。。

がんばったところ

• 通常版と児童書版でほぼ処理を共通化できた
• 各ページのrootではfetchせず、各componentでfetchしつつsuspendするようにした
• 最終的にanyをなくせた
  • openapi-zod-clientが便利
• 画像まわりちゃんとした
  • ロゴはwebpで3KBくらい
  • 縦横指定しつつloading="lazy"で遅延表示
  • Vercelの<Image />は使わなかった（料金が怖い）
• 絵文字ファビコンやってみた
  • https://zenn.dev/catnose99/articles/3d2f439e8ed161