Freshでブログ記事ページをSSGに対応したい

背景

• ブログをFresh+Supabaseに移行
  • 記事全体をSupabaseへ移行させた
  • SSRで毎アクセスごとに記事の取得を行なった
  • Webサイトにはbotがほぼ毎分やってきてSupabaseのリクエスト数が想定より遥かに多くなった。
• Supabaseのリクエストログを調査する

変更点

• Supabaseからの記事の取得をビルド時のみに行う。
  • サブモジュールでもよかったけれど開発時に大変だったのでまぁよし
• 検索はこのままSSRを利用し、検索のたびにリクエストする

参考

• The State of Web Frameworks on Deno
  • Lume を使ったほうが良い…?
• Generate static site (html + js + css)? #254
  • ちょっと古いか

調査

• Freshでは公式ではSSG対応はしていない。
  • かといって Lume だとislandっぽいことはできなさそう
  • Next.jsなら簡単にできそうだけど
    • ロマンではあるのだ
    • ChatGPTも「Next.js に移行すると一部は楽になるが、Fresh で自作する楽しさとDenoの軽さ」も大きな利点っていってくれた
    • もはや両方作って片方をuruly.comにのせる+検索避けしちゃうのもアリやな…

やってみる

.
├── out/                    # ← 静的HTMLの出力先
│   └── posts/
│       ├── article-a/
│       │   └── index.html
│       └── article-b/
│           └── index.html
└──  src/
    └── generate_posts.ts  # ← このスクリプトでHTMLを出力
	└── routes/
	    └── posts/
	        └── [slug].tsx     # SSRルートはそのまま残す（fallback用）

いや、でもこれは完全に静的になって、islandが機能しなくなる。

結論

現状ではFreshでSSG対応はかなり難しい。