CSS-Trickz: un experimento con los creadores bajo demanda de Netlify

CSS-Trickz: Un Experimento con los Creadores Bajo Demanda de Netlify

Los sitios de WordPress tienen una API por defecto que permite acceder a diversas funciones y datos del sitio en formato JSON. Esto puede ser útil para crear aplicaciones o sitios que dependan de datos actualizados sin necesidad de cargar todo el contenido estático. Un ejemplo interesante de esto es el sitio de bromas creado por Alex Riviere, que utiliza la API de WordPress para mostrar las publicaciones más recientes con un conjunto específico de datos.

Inicialmente, el sitio realizaba fetch desde el lado del cliente a la API cuando se cargaba. Aunque esto funcionaba, no era la solución más eficiente en términos de rendimiento para los visitantes del sitio, ya que es más lento que el HTML renderizado por el servidor. Además, también era ineficiente para los accesos a la API, lo que podía generar una carga innecesaria.

Para mejorar esta situación, Alex reescribió el sitio utilizando una función de Netlify. Esta función fetch la API en Node-in-the-cloud y entregaba el HTML prerenderizado. Si bien esto mejoraba el rendimiento, presentaba un nuevo problema: cada vez que alguien visitaba el sitio, la función se ejecutaba y generaba costos para Alex.

Netlify ofrece un nivel gratuito de funciones con un límite de 125.000 solicitudes por mes, suficiente para sitios pequeños, pero aún así, como señaló Alex, “preferiría no convertirse en una víctima de la popularidad de Internet”.

Constructores Bajo Demanda de Netlify

Afortunadamente, Netlify ha lanzado recientemente los Constructores Bajo Demanda, que facilitan el almacenamiento en caché de los resultados de las funciones. Esto es especialmente útil para casos como el de Alex, donde se necesita una solución eficiente y económica.

Los Constructores Bajo Demanda funcionan de manera similar a cualquier otra función de Netlify, pero con una firma específica:

const { builder } = require("@netlify/functions");

async function myFunction(event, context) {
// lógica para generar el contenido requerido
}

exports.handler = builder(myFunction);

Aplicaciones Amplias del Concepto

Este concepto no solo es aplicable para mejorar el rendimiento de sitios que utilizan la API de WordPress, sino que también puede ser utilizado para maximizar el uso de cualquier API gratuita. Andrew, en el ShopTalk DDD-Discord, sugirió la idea de escribir un blog sobre cómo maximizar tu nivel gratuito de API utilizando Constructores Bajo Demanda, lo cual es una excelente recomendación.

Ejemplo de Uso

Supongamos que tienes un sitio de WordPress y quieres utilizar los Constructores Bajo Demanda de Netlify para optimizar la entrega de datos. Aquí tienes un ejemplo básico de cómo podrías implementar esto:

1. Crea una función en Netlify:

const { builder } = require("@netlify/functions");
const fetch = require("node-fetch");

async function fetchData() {
const response = await fetch("https://tu-sitio-wordpress.com/wp-json/wp/v2/posts");
const data = await response.json();
return data;
}

async function myFunction(event, context) {
const data = await fetchData();
// Genera el HTML o JSON necesario con los datos obtenidos
return {
statusCode: 200,
body: JSON.stringify(data),
};
}

exports.handler = builder(myFunction);

1. Configura la función en Netlify:
   • Subir el archivo a tu repositorio y configurar Netlify para que lo use como función.
2. Usa la función en tu sitio:
   • Realiza fetch a la función de Netlify en lugar de directamente a la API de WordPress.

Beneficios

• Rendimiento Mejorado: Las funciones prerenderizadas y almacenadas en caché mejoran significativamente la velocidad de carga del sitio.
• Costos Reducidos: Al minimizar las solicitudes directas a la API y utilizar el almacenamiento en caché, se reducen los costos asociados con el uso de funciones y APIs.
• Escalabilidad: Los Constructores Bajo Demanda permiten manejar picos de tráfico de manera eficiente sin comprometer el rendimiento o incurrir en costos adicionales.

Conclusión

Los Constructores Bajo Demanda de Netlify ofrecen una solución efectiva para optimizar el rendimiento web y gestionar eficientemente el uso de APIs. Implementar esta tecnología puede transformar la manera en que manejamos los datos y mejoramos la experiencia del usuario, especialmente en sitios construidos sobre plataformas dinámicas como WordPress.