Hello, I'm Otsuka, CTO at Liberogic.
Even when asked to come up with an article... well, I'm not sure what to write.
So, I'd like to leave a brief technical note on partially integrating a CMS into an existing site.
In the past, the standard approach was to use PHP to "inject logic into the HTML." Today, using Cloudflare Pages Functions allows for a much smarter architecture that is also properly SEO-friendly and easily indexed by Google.
This article walks through how we applied "retrofit SSR" with Cloudflare Pages Functions to a static site built with Eleventy and integrated microCMS.
Key Points of This Architecture
In this project, we built the frontend with Eleventy and Nunjucks. Unlike Astro, which bundles Functions within the project, we adopted an approach that injects dynamic content after the fact into the static HTML output to dist/.
It turned out to be surprisingly flexible and convenient.
1. Require Basic Authentication only for the preview environment
The requirement was to add authentication to the preview environment while minimizing unnecessary Worker executions (and their cost) in production. To achieve this, we used a small pre-build step: only during the production build, we delete _middleware.js.
As a result, production requests skip the authentication process entirely, reducing unnecessary execution costs while balancing security and convenience.
2. Caching microCMS responses with the Cache API
With SSR (server-side rendering), a common concern is the load and latency of calling the API on every request.
To address this, we used Cloudflare's Cache API to cache responses at the edge. The cache TTL is set to a relatively short 5 to 10 minutes.
This keeps content fresh while maintaining strong performance.
3. Cache purging with KV (revalidate)
Even with a short TTL, it can be frustrating for operators when updates are not reflected immediately. To solve this, we used Cloudflare KV as a store to control revalidation.
The mechanism is simple.
- A webhook fires when an article is updated in microCMS.
- At that point, the KV value is updated.
- Using the KV value as a trigger, Pages Functions determine whether to invalidate the cache.
The result is a design that combines the best of both: lightning-fast performance from caching during normal operation, and immediate updates when content changes.
Summary
I really like this approach of "keeping the strengths of an existing static site while processing only the necessary parts at the edge," as it offers a great deal of operational flexibility.
It recreates the simplicity of old-school PHP with the power of today's Cloudflare! Flashy framework migrations have their appeal, but "grounded improvements" like this are often the most useful in real-world projects.
Well then.
The backbone of Liberogic's technical division. Whenever he hears someone say, "I wish we had something like this, it would be so handy," he adds his own ingenuity, turns the idea into added value, and gets it implemented in no time. A highly sociable team member who has many fans among our clients, he is a treasured asset to our company and a devoted cat lover.
Sho Otsuka
Director, CTO / Chief Engineer / Representative, Nekoana LLC / Looks unreasonably young