Controladores de borde de Netlify

Los Netlify Edge Handlers están en acceso anticipado (puedes solicitarlo), pero son geniales y creo que vale la pena entenderlos ahora. Creo que cambia la naturaleza de lo que es y puede ser Jamstack.

Ya sabes acerca de las CDN. Son globales. Alojan activos geográficamente cerca de las personas para que los sitios web sean más rápidos. Netlify hace esto para todo. Cuanto más puedas poner en un CDN, mejor. Jamstack promueve el concepto de que los activos, así como el contenido prerenderizado, deben estar en una CDN global. La velocidad es un beneficio importante de eso.

Los cálculos mentales con Jamstack y CDN tradicionalmente han sido así: estoy haciendo concesiones. Estoy haciendo más en el momento de la construcción, en lugar de en el momento del renderizado, porque quiero estar en esa CDN global por la velocidad. Pero al hacerlo, pierde un poco del poder dinámico de usar un servidor. O sigo haciendo cosas dinámicas, pero las hago en el momento del renderizado en el cliente porque es necesario.

Esas matemáticas están cambiando. Lo que dicen los Edge Handlers es: no es necesario hacer ese intercambio. Puede hacer cosas dinámicas en el servidor y permanecer en la CDN global. He aquí un ejemplo.

1. Tiene un área de su sitio en /blogy le gustaría que devuelva publicaciones de blog recientes que se encuentran en una base de datos en la nube en algún lugar. Este controlador de borde solo necesita ejecutarse en /blog, por lo que debe configurarlo para que se ejecute solo en esa URL.
2. Escribe el código de fetchesas publicaciones en un archivo JavaScript y lo colocas en: /edge-handlers/getBlogPosts.js.
3. Ahora, cuando cree e implemente, ese código se ejecutará (solo en esa URL) y hará su trabajo.

Entonces, ¿qué tipo de JavaScript estás escribiendo? Está bastante concentrado. Creo que el 95% de las veces estás reemplazando directamente la respuesta original. Tal vez el HTML de /blogsu sitio sea literalmente este:

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  titleTest a Netlify Edge Function/title/headbody  div/div/body/html

Con un Edge Handler, no es particularmente difícil esa respuesta original, realizar la llamada de datos en la nube y reemplazar las agallas con publicaciones de blog.

export function onRequest(event) {  event.replaceResponse(async () = {    // Get the original response HTML    const originalRequest = await fetch(event.request);    const originalBody = await originalRequest.text();    // Get the data    const cloudRequest = await fetch(      `https://css-tricks.com/wp-json/wp/v2/posts`    );    const data = await cloudRequest.json();    // Replace the empty div with content    // Maybe you could use Cheerio or something for more robustness    const manipulatedResponse = originalBody.replace(      `div/div`,      `        h2          a href="${data[0].link}"${data[0].title.rendered}/a        /h2        ${data[0].excerpt.rendered}      `    );    let response = new Response(manipulatedResponse, {      headers: {        "content-type": "text/html",      },      status: 200,    });    return response;  });}

(Estoy utilizando la API REST de este sitio como ejemplo de almacén de datos en la nube).

Es muy parecido al lado del cliente fetch, excepto que en lugar de manipular el DOM después de solicitar algunos datos, esto sucede antes de que la respuesta llegue al navegador por primera vez. Es un código que se ejecuta en la propia CDN (“el borde”).

Entonces, esto debe ser más lento que el contenido CDN prerenderizado, porque necesita realizar una solicitud de red adicional antes de responder, ¿verdad? Bueno, hay algunos gastos generales, pero es más rápido de lo que probablemente piensas. La solicitud de red ocurre en la red misma, por lo que computadoras ultrarrápidas en redes ultrarrápidas. Probablemente serán unos pocos milisegundos. De todos los modos, solo se les permite 50 ms de tiempo de ejecución.

Pude poner todo esto en funcionamiento en mi cuenta a la que se le concedió acceso. Es muy bueno que puedas probarlos localmente con:

netlify dev --trafficMesh

…que funcionó muy bien tanto en desarrollo como en implementación.

Todo lo que console.log()también podrás configurar en el panel de Netlify:

Aquí hay un repositorio con mi controlador de borde en funcionamiento.