Topics

Hola, soy Otsuka, CTO de Liberogic.

Aunque me pidas que haga algo con respecto al artículo...

Así que pensé en dejar una pequeña nota técnica sobre "la implementación parcial de un CMS en un sitio web existente".

Antes, el método habitual consistía en usar PHP para "inyectar lógica en HTML", pero ahora, al usar las funciones de Cloudflare Pages, se puede crear una estructura mucho más inteligente y optimizada para SEO que Google puede indexar correctamente.

En esta ocasión, compartiré cómo integré un microCMS en un sitio estático creado con Eleventy aplicando "SSR de postprocesamiento" mediante las funciones de Cloudflare Pages.

Puntos clave de esta configuración

En este proyecto, estamos construyendo el frontend usando Eleventy + Nunjucks. A diferencia de Astro, que encapsula las funciones dentro del proyecto,dist/Adoptamos un método en el que el contenido dinámico se inserta posteriormente en la salida HTML estática.

Es sorprendentemente fácil de manejar y práctico.

1. Quiero aplicar la autenticación básica únicamente al entorno de vista previa.

El requisito era: "Queremos incluir la autenticación en el entorno de vista previa, pero queremos minimizar la ejecución (costo) de trabajadores innecesarios en producción". Así que hicimos un pequeño ajuste al procesamiento previo a la compilación,Solo durante la fase de producción_middleware.jsEl proceso consiste en eliminarlo.

En el entorno de producción, no se requiere autenticación, lo que permite equilibrar la seguridad y la comodidad al tiempo que se minimizan los costes de ejecución innecesarios.

2. Almacene en caché las respuestas de microCMS utilizando la API de caché.

Al utilizar SSR (renderizado del lado del servidor), una de las mayores preocupaciones es la carga y la latencia causadas por realizar llamadas a la API con cada solicitud.

Esa es la de CloudflareCache APIDecidimos utilizar este método para almacenar en caché la respuesta en el borde de la red. El TTL de la caché se configuró con una duración relativamente corta, de entre 5 y 10 minutos.

Mantenemos la frescura al tiempo que garantizamos un rendimiento excelente.

3. Purga de caché (revalidación) mediante KV

Aunque el tiempo de vida útil es corto, el hecho de que las actualizaciones no se reflejen instantáneamente resulta un tanto estresante para el equipo de operaciones.Cloudflare KVLo utilizamos como almacén para controlar el proceso de revalidación.

El mecanismo es simple.

• Cuando se actualiza un artículo mediante microCMS, se activa un webhook.
• El valor KV se actualiza en ese momento.
• Pages Functions utiliza el valor KV como desencadenante para determinar si se debe invalidar la caché.

Este diseño ofrece lo mejor de ambos mundos: "actualizaciones ultrarrápidas gracias al almacenamiento en caché y actualizaciones instantáneas".

resumen

Me gusta este enfoque de "aprovechar las ventajas de los sitios estáticos existentes modificando solo las partes necesarias con Edge" porque ofrece un alto grado de flexibilidad operativa.

¡Recuperando la facilidad de uso del antiguo PHP con la potencia de Cloudflare! Si bien las migraciones de frameworks llamativas son atractivas, este tipo de "mejoras prácticas" son, en realidad, las más útiles en situaciones reales.

Bueno entonces.