Retrofitting SSR to Partially Migrate an Existing Site to a CMS (Notes on Using Cloudflare Pages Functions + microCMS)

Hello, I'm Otsuka, CTO at Liberogic.

I hear "please write an article" all the time, but... it's not that simple.

So I'd like to leave some technical notes on the subject of "partially migrating an existing site to a CMS."

In the past, using PHP to "embed logic into HTML" was the standard approach. Today, by using Cloudflare Pages Functions, you can build a more elegant solution that's properly indexed by Google with SEO in mind.

In this case, I'll share how we retrofitted SSR to a static site built with Eleventy using Cloudflare Pages Functions and integrated microCMS.

Key points of this architecture

In this project, we're building the frontend using Eleventy + Nunjucks. Rather than embedding Functions within the project like Astro does, we adopted an approach where dynamic content is injected into the static HTML output to dist/ after the fact.

It turns out to be surprisingly flexible and convenient.

1. Apply Basic authentication to preview environment only

The requirement was to "add authentication in the preview environment, but minimize Worker execution (cost) in production." To achieve this, we made a small adjustment during the build preprocessing step and remove _middleware.js only during production builds.

In the production environment, authentication processing is bypassed, so we reduce unnecessary execution costs while maintaining both security and usability.

2. Cache microCMS responses with Cache API

With SSR (Server-Side Rendering), one concern is the "load and latency from hitting the API on every request."

We decided to use Cloudflare's Cache API to cache responses at the edge. The cache TTL is set relatively short at around 5–10 minutes.

We maintain freshness while securing solid performance.

3. Cache purging with KV (revalidate)

Even with a short TTL, "updates don't reflect instantly," which is a bit stressful from an operations perspective. So we used Cloudflare KV as a store to control revalidation.

The mechanism is simple.

• When you update an article in microCMS, a Webhook is triggered
• At that moment, the KV value is updated
• On the Pages Functions side, use the KV value as a trigger to decide whether to invalidate the cache

This creates a best-of-both-worlds design: lightning-fast caching during normal operation, with instant updates when content changes.

Summary

I really appreciate this approach of leveraging the strengths of a static site while processing only the necessary parts at the edge—it provides great operational flexibility.

Recreating the ease of old-school PHP with the power of today's Cloudflare! While flashy framework migrations are fine, these pragmatic improvements are actually what proves most valuable in real-world operations.

Well then.