Pushing Boundaries To The Edge

While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions. We’ll discuss why the main hosting providers are introducing this technology, and why different JavaScript frameworks are modeling their approaches based on Edge computing.

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

Watch video on a separate page

FAQ

Facundo Giuliani is a developer relations engineer at Storyblock, based in Buenos Aires, Argentina. He is also an organizer of React Buenos Aires, the biggest React community in Argentina, and NodeConf Argentina.

The main issue with using a single web server is that it can lead to slower content delivery for users who are far from the server's location and potential server overload due to high traffic from simultaneous requests.

A Content Delivery Network (CDN) is a group of geographically distributed servers designed to speed up the delivery of web content by bringing it closer to users, thus improving access speed and reducing bandwidth issues.

CDNs improve content delivery by replicating data across multiple nodes or servers around the world, allowing users to access the content from the closest node, which reduces the load time and bandwidth use.

Edge computing in web development refers to a distributed network architecture where data processing is done close to the source of data or the users. This is used to minimize latency and bandwidth use, allowing for dynamic content generation near the user.

Edge computing allows for faster processing and delivery of dynamic content by executing server-side logic closer to the user. This can enhance personalization, enable geolocation-based content, support A/B testing, and bolster security measures.

Edge functions are scripts that can execute server-side rendering code within a CDN. They allow dynamic content generation close to the user, enhancing performance and user experience by reducing the load time.

Frameworks that support edge computing include Next.js, which offers edge functions, and Remix, which allows server-side logic to be executed on a per-route basis using either a Node.js runtime or an edge-oriented runtime.

Facundo Giuliani
Facundo Giuliani
9 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Talk discusses the concept of the Edge and its role in content delivery networks (CDNs). CDNs are designed to improve the delivery of static content but cannot distribute dynamically generated content. Edge computing is a distributed network architecture that processes data close to the source or users, enabling personalization, geolocation-based dynamic content, AV testing, and content authentication. Frameworks like NexGIS, Bercel, Netlify, AWS, and Remix offer edge computing capabilities through edge functions or middleware, allowing execution of server-side logic closer to end users.

1. Introduction to Edge and CDNs

Short description:

Hello, everyone. My name is Facundo, and today we will talk about the Edge. A content delivery network is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to the users. CDNs are improved to deliver static content, but they can't distribute dynamically generated content.

Hello, everyone. My name is Facundo, and today we will talk about the Edge.

First of all, I want to do a quick introduction. My name is Facundo Giuliani. I'm from Buenos Aires, Argentina. I'm a developer relations engineer at Storyblock. I'm also one of the organizers of React Buenos Aires, which is the biggest React community in Argentina, and I also organized NodeConf Argentina, a big conference we are expecting to do this year.

So before starting or before going to the actual Edge concept, I wanted to do a recap on how we browse the web. So when we have a device, let's say a mobile phone or a computer, we request a web page to a web server and the web server returns the content that we are requesting. This content can be generated in different ways depending on the rendering method that we are using, but basically the web server will generate this HTML page and will deliver that to us. That will be the original approach of the web to distribute the content.

But this approach has an issue. The issue is that if we are using one web server, that web server is located in one particular location in the world, and we have all the users and all the visitors sending the request to that same web server at the same time to that particular location, which brings certain issues. One issue is that if we are far from that web server, that request will take more time to go to the server and then to return back the HTML page or the content, and not only that, we may be overloading that web server if we have many people visiting the website at the same time.

So to overcome that issue, a new concept or a new idea appear with the years, which is the content delivery network. A content delivery network is a group of geographically distributed servers. The idea of this group is to speed up the delivery of web content by bringing that content closer to the users. So basically, what we have in this case is this central web server that we mentioned before, but we have the content replicated in different nodes, as they are called, which are servers in different locations in the world. And then this network, the users can access to the content through the edge that is closer to them. So we will have people from different countries visiting the closest node of the network. So they will receive the content from those nodes instead of having to send their request to the unique server. There's an origin server that is called in this CDN, which is the server that is going to actually generate the content dynamically, but that is the source server, and then we have the replicated nodes inside the CDN.

Cool. So that's nice. That approach was used for static site generation, which is a method where we generate content at build time, and we have that available as static pages for the users that are visiting our website. Why? Because the CDNs are improved to deliver static content. So here we can see the issue. What's the issue? The issue is that the content that the CDNs can deliver is static. So if we want to generate content on the flight by the server, we can't use a CDN, because we can only distribute HTML pages, images, videos, all type of static assets or static content. We can use client-side rendering with React for instance, but we would be generating the content on the client-side.

2. Edge Computing and Frameworks

Short description:

The edge is a distributed network architecture that processes data close to the source or users, minimizing bandwidth. It enables personalization, geolocation-based dynamic content, AV testing, and content authentication. Frameworks like NexGIS, Bercel, Netlify, AWS, and Remix offer edge computing capabilities through edge functions or middleware, allowing execution of server-side logic closer to end users.

And that's something that if we want the server to generate that content to have a better performance, we can't do that. So to overcome those two scenarios or doing a mix of those two scenarios, we have the edge, which is a new concept and the idea of the edge is to have a distributed network architecture that processes the data as close as the source or the users to minimize this bandwidth that we were mentioning before.

So the idea is to replicate the server-side rendering on this original approach that we have, but closer to the users using the same approach that we use for the CDNs and also the same distribution of the edges and the different servers across the world.

So in this case, this is an example image from one of the examples of this edge networks. This is from AWS, but we will have CDNs with these servers that are hosting the static content, but in the same networks, in the same regional networks, we will have also edge computing servers that will execute server logic closer to the users.

So in this case, we can use the edge for different scenarios like personalization in the case that we want to send custom content to the different users. We can use geolocation to identify where the users are visiting our website from and create dynamic content based on that. We can implement approaches of AV testing in the case that we want to test different approaches on our projects, we can do that based on this dynamic content that we can generate with the edge computing. And then we can add authentication or security to the content of our websites. So we can manage static content but also dynamic content using the same edge network that we generated.

I will mention some of the frameworks that allows you to work with edge computer and as we are in a React conference, I will mention React frameworks. The first example that I wanted to mention is NexGIS. NexGIS offers edge functions which are basically scripts and functions that can execute server-side rendering code, so they are small pieces of code that can execute these functions on the edge with server-side rendering, but using the same network, or the same approach that we use for CDNs. In order to execute these functions you will need your hosting provider to allow you to do that.

The main hosting providers offer different approaches, but they offer edge computing like Bercel, Netlify, AWS, etc. We can also use what is called the middleware. The middleware is an intermediate layer or tier that can execute custom logic before a request is processed. In the case that you are using Next.js for static site generation and static content, you can catch all the different requests before you deliver the static content to the users, and then you can execute custom server-side logic before actually returning the content. So you can add custom content or you can add dynamic content to what you are returning to the user based on that.

And another framework, another React framework that we can mention is Remix. Remix's approach is basically focused on the server-side rendering, and they use what they call the Next.js Generation edge. So the idea with Remix is that you can choose between a Node.js runtime or an edge-oriented runtime on a per-route basis. So depending on the routes that you are going to manage on your website, you can execute server-side logic using a Node.js runtime or an edge function, or a worker, or, well, again, the different names that the different hosting providers offer you for this edge computing logic. So the idea is that you can execute server-side logic as close as possible to the end users that are visiting your website.

So thank you very much. Let's keep in touch, and we can continue talking about the edge or any other topic.

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

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Watch video: Fighting Technical Debt With Continuous Refactoring
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
AHA Programming
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.