Hola, soy Otsuka, CTO de Liberogic.
Aunque me pidan que escriba un artículo así...
Por eso quería dejar algunas notas técnicas sobre «la conversión parcial de un sitio existente a CMS».
Antiguamente, con PHP era común «incrustar lógica dentro del HTML», pero ahora con Cloudflare Pages Functions, podemos crear una estructura más elegante y con consideraciones de SEO que garantiza un indexado adecuado por Google.
Esta vez presento cómo integramos microCMS aplicando «SSR de instalación posterior» con Cloudflare Pages Functions a un sitio estático construido con Eleventy.
Aspectos clave de esta arquitectura
En este proyecto estamos construyendo el frontend con Eleventy + Nunjucks. A diferencia de Astro, que incluye Functions dentro del proyecto, adoptamos un enfoque en el que inyectamos contenido dinámico posteriormente en el HTML estático generado en dist/.
Resulta ser sorprendentemente flexible y práctico.
1. Aplicar autenticación básica solo en el entorno de vista previa
El requisito era «queremos autenticación en el entorno de vista previa, pero en producción queremos minimizar la ejecución (y costo) de Workers innecesarios». Para lograrlo, implementamos una estrategia en el preprocesamiento de compilación donde solo en la compilación de producción eliminamos _middleware.js.
En el entorno de producción, se evita pasar por el proceso de autenticación, lo que reduce los costos de ejecución innecesarios mientras se mantiene el equilibrio entre seguridad y conveniencia.
2. Almacenamiento en caché de respuestas de microCMS con Cache API
Con SSR (Server-Side Rendering), lo que siempre preocupa es la carga y la latencia de tener que llamar a la API en cada solicitud.
Por eso decidimos usar Cache API de Cloudflare para almacenar las respuestas en caché en el perímetro. El TTL de caché se configuró en un valor corto, de alrededor de 5 a 10 minutos.
De esta forma mantenemos la frescura de los datos mientras aseguramos un rendimiento sólido.
3. Purga de caché (revalidate) mediante Cloudflare KV
Aunque el TTL es corto, el hecho de que "los cambios no se reflejen inmediatamente" genera cierto estrés operativo. Por eso utilizamos Cloudflare KV como almacén de control para la revalidación.
El mecanismo es simple.
- Cuando se actualiza un artículo en microCMS, se dispara un webhook
- En ese momento se actualiza el valor en KV
- En Cloudflare Pages Functions, se determina si se debe invalidar la caché en función del valor de KV
Con esto, conseguimos un diseño que aprovecha lo mejor de ambos mundos: «normalmente caché ultrarrápido, con actualización inmediata cuando es necesaria».
Conclusión
Me encanta este enfoque de «mantener las ventajas de los sitios estáticos existentes y procesar solo lo necesario en el perímetro»: ofrece una flexibilidad operativa muy alta.
¡Replicar la facilidad del PHP antiguo con el poder de Cloudflare actual! Las migraciones de frameworks llamativas están bien, pero estas «mejoras prácticas y realistas» son las que realmente funcionan en el día a día.
Bueno, hasta luego.
Pilar de la división técnica de Liberogic. Cuando escucha "Me gustaría que existiera esto, sería muy útil", lo implementa en un instante, añadiendo valor gracias a su ingenio innato. Persona con gran capacidad de comunicación, querida por muchos clientes, es un tesoro de nuestra empresa y adora los gatos.
Sho
Director Técnico / Ingeniero Jefe / Representante de Nekoana LLC / Aparentemente más joven de lo que es