Edgio Applications v4 and support for Node.js 16 are undergoing end-of-life (EOL). Read the Layer0 EOL announcement, the Node.js 16 EOL plan  or browse Edgio Applications v7 docs.
Edgio
Edgio

System Overview

This guide introduces the high-level concepts behind Edgio.

What is Edgio?

Edgio extends the capabilities of a traditional CDN by not only hosting your static content, but also providing server-side rendering for progressive web applications as well as caching both your APIs and HTML at the network edge to provide your users with the fastest browsing experience.
Check out our video Edgio - What & Why for more details.

Architecture

architecture

L1 Edge Cache

Edgio features a global network of over 80 global points of presence, ensuring that each user experiences minimal latency when connecting to your site

L2 Shield Cache

Edgio employs an L2 cache that maximizes global cache hit rates and reduces traffic on your servers by coalescing requests. If more than one request for a given URL arrives at the L2 cache simultaneously, all but one are held up while the result is retrieved from a JS worker. All requests are fulfilled with the same response. This reduces the concurrent load on your APIs and allows you to run with lower costs.

JS Workers

Edgio provides server side rendering (SSR) via JS workers in multiple regions.

Speed

Edgio makes it possible to deliver sub-second page load-times and instantaneous client-side page transitions through the use of prefetching and caching. It empowers developers to optimize performance by leveraging powerful caching and edge logic capabilities right from their application code using an EdgeJS JavaScript API. Rather than manually configuring your CDN through a web portal, Edgio allows you to put your edge logic in code, so that it’s source-controlled, reviewed, and tested using the same software development lifecycle as the rest of your vital application code. You can even A/B test edge logic in production!
JavaScript
1// Example Edgio routes file for a Next.js app
2
3const { Router } = require('@layer0/core/router')
4const { nextRoutes } = require('@layer0/next')
5
6export default nextJSApp => {
7 return new Router()
8 .get('/p/:productId', ({ cache }) => {
9 cache({
10 edge: {
11 // cache the SSR response at the edge
12 maxAgeSeconds: 60 * 60, // one hour
13 staleWhileRevalidateSeconds: 60 * 60 * 24, // one day
14 },
15 })
16 })
17 .use(nextRoutes) // serve pages using Next.js's built-in routing
18 .fallback(({ proxy }) => proxy('legacy')) // serve unmatched URLs from the legacy implementation of the site so we can gradually role out the new PWA page by page.
19}

Scalability

Edgio automatically scales to handle increased traffic. No configuration is required. You simply write your application code and Edgio provides compute resources to handle any level of traffic.

High Availability

Edgio provides high availability (HA) in all of its components. You can choose a particular region of the world in which your API servers are located. Edgio will provision two data centers closest to it, connecting them with automatic DNS failover. HA is also provided within the data centers themselves, with all individual processes being (at least) duplicated and sharing the traffic load among themselves. This in-depth HA architecture minimizes the chances of loss of traffic.

Productivity

Edgio empowers your team to build apps faster and be more transparent. Every time a developer pushes commits to source control, that version of the site is automatically given a permanent preview URL so that QA testers, code reviewers, and other stakeholders can try out the changes immediately. Find a bug in your app? Edgio makes it easy to go back in time and try out older versions of the app to find the point in when the bug was introduced. This is especially useful for meeting performance targets as it makes it easy to compare speed measurements between multiple iterations of your app.

React, Vue, and Angular

Edgio supports the most widely used technologies for building progressive web applications. The Edgio CLI automatically detects whether you’re using React (Next.js), Vue (Nuxt.js), or Angular and configures your app accordingly so you can publish your app to the cloud in seconds.