Hola, soy Otsuka, CTO de Liberogic.
Me piden que escriba un artículo como sea... Bueno, veamos.
Así que quiero dejar algunas notas técnicas sobre la "migración parcial de un sitio existente a CMS".
Antes lo habitual era usar PHP para "inyectar lógica dentro del HTML", pero hoy, con Functions de Cloudflare Pages, se puede crear una arquitectura más elegante que además está pensada para que Google indexe correctamente el contenido mediante SEO.
En esta ocasión comparto cómo añadimos "SSR posterior" a un sitio estático construido con Eleventy, usando Cloudflare Pages Functions, e integramos microCMS.
Puntos clave de esta arquitectura
En este proyecto, el frontend se ha construido con Eleventy + Nunjucks. A diferencia de Astro, donde las Functions se integran dentro del propio proyecto, aquí se adopta un enfoque en el que el contenido dinámico se inserta después sobre el HTML estático generado en dist/.
Resulta bastante flexible y práctico.
1. Quiero aplicar autenticación básica solo al entorno de vista previa
El requisito era: "queremos incluir autenticación en el entorno de vista previa, pero reducir al máximo la ejecución innecesaria de Workers en producción (coste)". Para lograrlo, aplicamos un enfoque sencillo en el preprocesamiento de la compilación: solo en la compilación de producción se elimina _middleware.js.
Como en producción la solicitud no pasa por el proceso de autenticación, se reduce el coste de ejecución innecesario y se logran, a la vez, la seguridad y la comodidad.
2. Almacenar en caché las respuestas de microCMS con Cache API
Al usar SSR (renderizado del lado del servidor), surge una preocupación natural: la carga y la latencia de llamar a la API en cada solicitud.
Para resolverlo, utilizamos la Cache API de Cloudflare para almacenar las respuestas en caché en el edge. El TTL de la caché se configuró en un valor corto, de unos 5 a 10 minutos.
Así se mantiene la frescura del contenido y, al mismo tiempo, se garantiza un buen rendimiento.
3. Purga de caché con KV (revalidate)
Aunque el TTL sea corto, que un cambio no se refleje en el momento es algo frustrante desde el punto de vista operativo. Por ello, utilizamos Cloudflare KV como almacén para controlar el revalidate.
El mecanismo es sencillo.
- Al actualizar un artículo en microCMS, se dispara un Webhook.
- En ese momento, se actualiza el valor de KV.
- Utilizando el valor de KV como disparador en Pages Functions, se determina si la caché debe invalidarse.
Con esto, logramos un diseño que combina lo mejor de ambos mundos: velocidad extrema gracias a la caché en el uso habitual y reflejo inmediato de los cambios al actualizar.
Conclusión
Este enfoque, que aprovecha las ventajas de un sitio estático existente y procesa en el edge solo lo necesario, ofrece gran flexibilidad operativa y me resulta muy atractivo.
¡Recreamos la sencillez de la era PHP con la potencia actual de Cloudflare! Las grandes migraciones de frameworks son válidas, pero este tipo de mejoras sólidas y con los pies en la tierra son, en realidad, las más útiles en el día a día.
Eso es todo por ahora.
La columna vertebral del departamento técnico de Liberogic. Cuando escucha frases como "Ojalá existiera algo así, sería muy útil...", con su ingenio añade valor extra y lo implementa en un abrir y cerrar de ojos. Con una gran capacidad de comunicación y muchos seguidores entre nuestros clientes, es un verdadero tesoro para la empresa, además de un gran amante de los gatos.
Sho Otsuka
Director de CTO / Ingeniero jefe / Representante de Nekoana LLC / Aparenta ser más joven de lo que es