Empujando los límites hasta el borde

Rate this content
Bookmark
Slides

Mientras la tecnología avanza cada vez más, el desarrollo web intenta acercarse más al usuario. Las CDNs y los servidores web están evolucionando, y ahora nos ofrecen la posibilidad de ejecutar lógica del lado del servidor sin depender de un centro de datos único ubicado en un lugar específico del mundo. Presentemos el concepto de The Edge. Veremos cómo funciona, y hablaremos sobre las funciones de Edge. Discutiremos por qué los principales proveedores de hosting están introduciendo esta tecnología, y por qué diferentes marcos de trabajo de JavaScript están modelando sus enfoques basados en la computación Edge.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Facundo Giuliani es un Ingeniero de Relaciones con Desarrolladores en Storyblok, organizador de React Buenos Aires y Dev Summit Argentina, y es originario de Buenos Aires, Argentina.

Una CDN (Red de Distribución de Contenido) es una red de servidores distribuidos geográficamente que acelera la entrega de contenido acercando el contenido a los usuarios. Los beneficios incluyen reducción del consumo de ancho de banda, mejor rendimiento y mayor seguridad.

La distancia que recorre una solicitud desde el usuario hasta el servidor puede afectar significativamente el tiempo de carga de una página. Por ejemplo, una solicitud desde Buenos Aires hasta un servidor en Australia tardará más en cargar comparado con un servidor más cercano.

La generación de sitios estáticos implica crear un sitio web que se construye durante un proceso que genera la versión estática de las páginas del sitio. Este proceso produce páginas con activos estáticos como archivos HTML, CSS y JavaScript, lo cual es ideal para ser alojado y servido a través de CDNs.

Para contenido dinámico, las CDNs utilizan un servidor de origen que procesa cada solicitud y entrega el contenido resultante. Aunque esto soluciona la entrega de contenido dinámico, puede replicar algunos de los problemas de rendimiento de los servidores web tradicionales si el servidor de origen está lejos del usuario.

DH representa una evolución de las CDNs, donde se procesan datos del cliente lo más cerca posible de la fuente de esos datos. Esto permite entregar contenido dinámico más rápido, ofreciendo beneficios como mejor rendimiento, seguridad, información en tiempo real y fácil escalabilidad.

En Next.js, el concepto de Edge se maneja a través de Edge functions, que son scripts serverless que ejecutan la renderización del lado del servidor de manera distribuida. También permite implementar middleware para ejecutar lógica personalizada para cada solicitud.

Facundo Giuliani
Facundo Giuliani
11 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy introduce el concepto de The Edge y las Redes de Entrega de Contenido (CDNs), que acercan el contenido a los usuarios, mejorando el rendimiento y la seguridad. La charla también discute la Computación Edge y el Alojamiento Distribuido (DH), que procesa los datos del cliente más cerca de la fuente para una entrega más rápida de contenido dinámico. El uso de DH ofrece beneficios como mejor rendimiento, seguridad, información en tiempo real y escalabilidad. La charla concluye con una visión general de los conceptos de Edge, incluyendo la lógica de renderizado del lado del servidor y el middleware personalizado para cada solicitud.
Available in English: Pushing Boundaries to the Edge

1. Introducción a Edge y CDNs

Short description:

Hola a todos. Hoy hablaremos sobre Edge. El concepto de Edge se trata de evaluar cómo solían ser las cosas en el pasado y cómo son ahora. Cuando navegamos por una página, enviamos una solicitud a un servidor web, que genera un documento HTML. Sin embargo, esto puede causar problemas como la sobrecarga del servidor y tiempos de carga lentos. Para abordar esto, se desarrollaron las Redes de Distribución de Contenido (CDN). Las CDN son servidores distribuidos geográficamente que acercan el contenido a los usuarios, reduciendo el consumo de ancho de banda y mejorando el rendimiento y la seguridad. Las CDN entregan contenido estático y han llevado al concepto de generación de sitios estáticos.

Hola a todos. Mi nombre es Facundo, y hoy hablaremos sobre Edge. Primero que nada, quería presentarme. Como dije, mi nombre es Facundo, Facundo Giuliani. Soy de Buenos Aires, Argentina. Soy un Ingeniero de Relaciones con Desarrolladores en Storyblok. También soy uno de los organizadores de React Buenos Aires, la mayor comunidad de React en Argentina. Organizamos encuentros locales cada mes en la ciudad. También soy uno de los organizadores de Dev Summit Argentina, otra comunidad de desarrolladores aquí en el país. Así que si estás por aquí, avísame.

Antes de comenzar con el concepto real de Edge, quería introducirlo. Evaluando o revisando cómo solían ser las cosas en el pasado. No solo en el pasado, sino también hoy en día, cuando solicitamos una página o estamos navegando por una página desde nuestro navegador, digamos en nuestro teléfono móvil o nuestra computadora, lo que hacemos es enviar la solicitud a un servidor web. En el caso de la forma original en que solían ser las cosas, el servidor web procesaría mi solicitud y generaría un documento HTML que entregará a mi navegador para que pueda ver la página que quiero visitar. El problema es que esta solicitud se procesa para cada usuario que solicita la página y que quiere visitar la página, lo cual puede estar bien, pero también puede traer algunos problemas. Los problemas son que si tenemos varias personas solicitando la misma página estaremos sobrecargando el servidor que está generando el contenido y los documentos HTML. Y no solo eso, también dependemos de dónde esté ubicado ese servidor web. Entonces los usuarios enviarán la solicitud, la solicitud viajará a la ubicación específica donde se encuentra ese servidor, y luego tendremos que esperar a que el documento HTML regrese a su navegador, digamos. Entonces, si tengo un servidor web ubicado en Australia, porque ahí es donde está alojado mi sitio web, y estoy visitando desde Argentina, mi solicitud tendrá que viajar desde Buenos Aires hasta Australia. Y eso, quiero decir, dependiendo de la distancia que recorre la solicitud, afectará el tiempo de carga de mi página. Entonces, teniendo en cuenta estos problemas, se desarrolló un nuevo concepto con los años, que es la Red de Distribución de Contenido o CDN, y estas CDN son un grupo de servidores distribuidos geográficamente que aceleran la entrega de contenido porque estamos acercando el contenido a los usuarios. Básicamente, una CDN es una red de servidores que se llaman nodos, estos nodos van a replicar el contenido en cada una de las ubicaciones de los diferentes servidores y la solicitud de los usuarios viajará al nodo más cercano para obtener el contenido en lugar de tener que ir a una ubicación particular o a un servidor web particular. Entonces, en el mismo ejemplo que mencioné antes, si tengo un nodo de CDN en Brasil, digamos, mi solicitud en lugar de tener que ir a Australia y traer de vuelta la página HTML que estoy solicitando, viajaría a Brasil y obtendría el mismo contenido. Los beneficios que aportan las CDN son que estamos reduciendo el consumo de ancho de banda porque no estamos enviando todas las solicitudes al mismo servidor web. Por otro lado, tendríamos un mejor rendimiento por esta razón y por la razón de lo que dije, la solicitud no tiene que ir a una ubicación particular en el mundo. Y por otro lado, también tendremos más seguridad porque los usuarios no estarán solicitando el contenido al servidor web específico que está generando el contenido, sino que van a solicitar al nodo más cercano que está alojando el contenido específico que queremos entregar. Y cuando digo contenido específico, es porque las CDN o los nodos del servidor de las CDN están mejorados para entregar contenido estático. Pueden entregar activos estáticos como archivos HTML, archivos CSS o archivos JavaScript. Y eso atrajo la atención a un nuevo concepto llamado generación de sitios estáticos. Básicamente, se trata de crear un sitio web que se genera y se construye durante el proceso que ejecutamos para generar la versión estática de las diferentes páginas de nuestro sitio web.

2. Edge Computing y DH

Short description:

Lo que hacemos es ejecutar un proceso de construcción para generar páginas estáticas con activos para alojar en CDNs. Sin embargo, las CDNs están diseñadas para contenido estático. Para manejar contenido dinámico, tenemos servidores de origen en las CDNs. Para abordar esto, se desarrolló un nuevo concepto llamado DH. DH es una red distribuida que procesa los datos del cliente más cerca de la fuente, entregando contenido dinámico más rápido. DH ofrece beneficios como un mejor rendimiento, seguridad, información en tiempo real y escalabilidad. Permite la personalización, geolocalización, pruebas A-B y gestión de seguridad. Los marcos basados en React como Next.js proporcionan funciones de Edge, scripts sin servidor para la renderización del lado del servidor.

Lo que hacemos es básicamente ejecutar este proceso de construcción y generará todas las páginas de mi sitio web en una forma estática con activos estáticos como archivos HTML, archivos CSS, y archivos JavaScript. Y podemos usar eso para alojar nuestro sitio web y usarlo y obtener la ventaja de las CDNs.

Pero probablemente estás viendo aquí el problema y el problema es que las CDNs están planeadas para entregar contenido estático. Entonces, ¿qué sucede cuando tengo contenido dinámico que necesita ser generado para un usuario particular con condiciones particulares y para una solicitud particular que está llegando? Digamos que necesito procesar una solicitud particular y enviar contenido basado en esa solicitud. Si ese es el caso, todavía tenemos lo que llamamos un servidor de origen en nuestra CDN. Este servidor de origen es como el servidor web que mencionamos antes que procesará cada solicitud y entregará el contenido o entregará el resultado del procesamiento. Pero el hecho es que nuevamente, esta CDN, esta red, solo tiene un servidor de origen, por lo que si estoy solicitando contenido estático, está bien. Puedo obtenerlo del nodo más cercano de la red, pero si necesito contenido dinámico, tengo que enviar la solicitud a un servidor de origen particular, y estamos teniendo el mismo problema que teníamos antes.

Entonces, con este concepto en mente, y después de que los servidores web evolucionaron y tuvieron nuevas características y nuevas posibilidades, se desarrolló un nuevo concepto que es el concepto de DH. DH es básicamente una red distribuida, como la que tenemos para las CDNs. Pero en este caso tenemos una architecture donde estamos procesando los datos del cliente tan cerca de la fuente de esos data como sea posible. Entonces, DH está básicamente evolucionando las CDNs para tener servidores de origen, o algo así como servidores de origen, digamos, donde tenemos los nodos de la CDN. Entonces, además de entregar contenido estático desde nuestros nodos de CDN, también vamos a poder procesar data y basado en el procesamiento dinámico o la lógica del lado del servidor que procesará los data que vienen de los clientes, podremos entregar contenido dinámico a ellos más rápido porque lo estamos haciendo más cerca de la fuente de los data, que son los usuarios. Entonces, como puedes ver, tenemos algunos de los principales beneficios que también tenemos para las CDNs que son mejor performance, más security, pero también vamos a tener información en tiempo real y fácil scalability porque podemos agregar más servidores de borde, como se les llama, a nuestra red y nosotros podremos procesar solicitudes de más usuarios de diferentes ubicaciones. Entonces, estas redes de borde, algunos de los principales casos de uso que podemos resolver con la computación de borde, digamos o una red de borde son la personalización. Podemos evaluar la solicitud de los usuarios. Y basado en ciertos parámetros que estamos definiendo, podemos devolver cierto contenido o un contenido diferente. También podemos aplicar geolocalización basada en la ubicación del usuario que está visitando nuestro sitio web. Podemos devolver cierto contenido o mostrar una parte particular de nuestra página web. También podemos implementar estrategias de pruebas A-B testing si estamos evaluando para lanzar una nueva campaña en nuestro sitio web. Usando este procesamiento dinámico de la solicitud podemos mostrar una versión particular del contenido o la otra. Y finalmente, también podemos gestionar la security. Podemos aplicar authentication o autorización dinámicamente y podemos evaluar qué usuarios están visitando nuestro sitio web. Y basado en eso, mostrar contenido particular, mostrar validation, algunas cosas así. Entonces, como estamos discutiendo el concepto de Edge, que también está vinculado al proveedor web o al servidor web que vamos a usar o al proveedor de alojamiento que vamos a usar para alojar nuestro sitio web. También tenemos que tener en cuenta el marco que vamos a usar para crear el código y la aplicación en sí que se alojará en el Edge. Como estamos en React Berlin mencionaré cómo un par de marcos basados en React están manejando el concepto de Edge y las características que nos ofrecen para manejar eso. Uno de los marcos es Next.js. Next.js ofrece lo que llaman Edge functions, que son básicamente scripts serverless. Quiero decir scripts de los que no tienes que preocuparte por el mantenimiento del servidor web que se ejecutan del lado del servidor, quiero decir que ejecutan la renderización del lado del servidor que

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Nuxt en el Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt en el Edge
Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.
Deno 2.0
Node Congress 2023Node Congress 2023
36 min
Deno 2.0
Top Content
The Talk discusses forced optimization with Node and Deno, with Deno aiming to pursue the same goals in a more expansive and modern way. Deno has built-in support for NPM and enforces security constraints. It also has a key-value database called Deno KV, which will be a core part of the Deno 2 API. Deno Deploy is a serverless Edge Functions platform powered by FoundationDB, optimized for fast reading and ideal for building eCommerce sites or application servers at the edge. Deno 2.0 is coming soon with more features under development.
Sitios web estáticos primero con Cloudflare Workers
Node Congress 2022Node Congress 2022
30 min
Sitios web estáticos primero con Cloudflare Workers
The Talk covers the historical landscape of web development, the rise of static site generators, the serverless revolution, edge computing, and using Cloudflare services to enhance static websites. It explores the challenges of early web development, the shift to static sites and client-side rendering, and the advantages of server-side and client-side rendering. It also discusses Cloudflare services like Cloudflare workers, KV, durable objects, and HTML rewriter for building fast and minimal hosting solutions. The Talk highlights the use of DurableObjects for analytics and integration, dynamic content on static sites, JAMstack, and the advantages of using Cloudflare Workers for automatic deployment, multiple language support, and combining static pages with JavaScript functions. It introduces the concept of edge computing and the difference between Cloudflare Pages and Workers. It also touches on error handling and the use of HTML rewriter, Cloudflare KVstore, and DurableObjects for managing state and storing dynamic data.
Construyendo aplicaciones full-stack en el Edge
React Advanced Conference 2022React Advanced Conference 2022
9 min
Construyendo aplicaciones full-stack en el Edge
This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.
El Edge y las Bases de Datos: Todo en Todas Partes al Mismo Tiempo
Node Congress 2023Node Congress 2023
26 min
El Edge y las Bases de Datos: Todo en Todas Partes al Mismo Tiempo
This talk discusses working with databases on the Edge, the challenges of serverless and databases, and the challenges of working with databases on the Edge. It explores solutions such as using proxy connections and globally replicated data stores. The talk also highlights the use of Prisma for caching data and the considerations for edge migration. Additionally, it mentions the caching strategy with SWR and the availability of edge solutions for caching.
La Nueva Frontera: Comercio Electrónico en el Edge
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
La Nueva Frontera: Comercio Electrónico en el Edge
Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.

Workshops on related topic

Revelando la Salsa Secreta de Next.js en el Edge
React Summit 2024React Summit 2024
48 min
Revelando la Salsa Secreta de Next.js en el Edge
Workshop
Mustafa Azim
Mustafa Azim
Next.js en el Edge con su nueva salsa secreta para una mejor experiencia de usuario y alto rendimiento. Revelaremos la salsa secreta de Next.js y la forma de trabajar para ofrecer la mejor experiencia de usuario en la red Edge y las nuevas características, incluyendo la pre-renderización parcial. Cómo aprovechar el componente del servidor y su alto rendimiento en la red Edge.
Tabla de contenidos:- Introducción a la red Edge- Tiempo de ejecución en el Edge con V8- Casos de uso de las funciones en el Edge- Desplegar un servicio en la red Edge