--- title: "既存サイトを「後付けSSR」で一部CMS化（Cloudflare Pages Functions + microCMS の活用メモ）" date: 2026-04-20 categories: column author: 大塚 canonical: https://www.liberogic.jp/topics/20260421-cloudflare-pages-functions/ --- # 既存サイトを「後付けSSR」で一部CMS化（Cloudflare Pages Functions + microCMS の活用メモ） ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/e5a7cd5f42794915937ef83186a6a2e5/20260227_retro-ssr-cloudflare-microcms.png) 「既存サイトの一部CMS化」について、今回はEleventyで構築された静的サイトに、Cloudflare Pages Functionsで「後付けSSR」を施してmicroCMSを組み込んだ話を紹介します。 こんにちは、リベロジックでCTOをしている大塚です。 記事をなんとか！と言われてもなぁ……。 ということで「既存サイトの一部CMS化」について、ちょっとした技術メモを残しておこうと思います。 昔ならPHPを使って「HTMLの中にロジックを流し込む」のが定番でしたが、今はCloudflare PagesのFunctionsを使うことで、もっとスマートに、きちんとGoogleにインデックス化できるSEOを配慮した構成が作れるんですよね。 今回はEleventyで構築された静的サイトに、Cloudflare Pages Functionsで「後付けSSR」を施してmicroCMSを組み込んだ話を紹介します。 ### 今回の構成のポイント 今回のプロジェクトでは、Eleventy + Nunjucks を使ってフロントエンドを構築しています。 Astroのようにプロジェクト内にFunctionsを内包する形ではなく、`dist/` に出力された静的HTMLに対して、後から動的コンテンツを差し込む 式を採用しました。 意外と取り回しが良くて便利ですね。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/b2e425e63d88420c9a89ca79ef1e65b7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-02-20%2014.26.06.png) ### 1. プレビュー環境だけBasic認証をかけたい 要件としてあったのが「プレビュー環境では認証を入れたいけど、本番では不要なWorkerの実行（コスト）を極力減らしたい」というもの。 そこで、ビルド前処理でちょっと工夫して、**本番ビルドの時だけ **`_middleware.js` を削除するという運用です。 本番環境では認証処理を通らずに済むので、余計な実行コストを抑えつつセキュリティと利便性を両立させています。 ### 2. Cache APIでmicroCMSのレスポンスをキャッシュ SSR（サーバーサイドレンダリング）にすると、どうしても気になるのが「リクエストのたびに API を叩きに行く負荷やレイテンシ」ですよね。 そこはCloudflareの**Cache API**を利用して、レスポンスをエッジでキャッシュさせることにしました。 キャッシュTTLは5〜10 分程度と短めに設定。 鮮度を保ちつつパフォーマンスもしっかり確保しています。 ### 3. KVを使ったキャッシュパージ（revalidate） 短いTTLとはいえ「更新した瞬間に反映されない」のは運用側としては少しストレスです。 そこで**Cloudflare KV**をrevalidateの制御用ストアとして活用しました。 仕組みはシンプルです。 - microCMSで記事を更新するとWebhookが飛ぶ - そのタイミングでKVの値を更新 - Pages Functions側でKVの値をトリガーに、キャッシュを無効化するか判定 これで「普段はキャッシュで爆速、更新時は即時反映」という、いいとこ取りの設計になりました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/4ae46172e3d1454594cc237976f52cee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-02-20%2014.26.13.png) ### まとめ こういう「既存の静的サイトの良さを活かしつつ、必要なところだけエッジで加工する」というアプローチは、運用の柔軟性が高くて気に入っています。 昔のPHP的な手軽さを現在のCloudflareのパワーで再現する！ 派手なフレームワーク移行もいいですが、こういう「地に足のついた改善」が実は一番現場で役立つんですよね。 ではでは。