Netlify Edge Functions: A new serverless runtime powered by Deno

My colleague says this plugin is very astonishing!!
We’re pleased to announce that Edge Functions is now available in public beta on the Netlify platform. Edge Functions enables you to run serverless JavaScript/TypeScript functions right from Netlify’s Edge network. It’s a full runtime environment, with complete control to transform requests and responses, stream server rendered content, or even run an entire application—all right from the network edge.

Because Edge Functions is built on Deno, an open source, standards-based runtime, it works out-of-the-box with web frameworks that support these capabilities. And because it’s available from the Netlify platform, it’s a seamless part of the powerful workflow you already know. You use it the same way you do Netlify’s other serverless capabilities. They’re built, deployed, and versioned right alongside your frontend code.

You may recall that we took a first swing at this over a year ago with a product called Edge Handlers. However, we learned as developers tested it in the wild, that it wasn’t moving the developer experience forward. It suffered from the same flaws of other proprietary edge compute offerings that don’t integrate well with today’s modern web frameworks. It was also clear that you need much more than just programmable routing at the edge. You need full serverless functions that transform content and responses using familiar web standard APIs.

As destiny would have it, at the same time we were considering our new path forward, Deno was establishing itself as the new open standard for JavaScript and TypeScript runtimes, empowering developers to leverage the JavaScript primitives they already know, like Request and Response, and the power of Deno’s APIs. It was a perfect match for Netlify and the idea for Edge Functions was born.

Edge Functions is a clean-sheet rewrite for Netlify. They work as their own endpoints, enabling:

streaming edge rendering
React Server Components
content rewrites
user redirection
A/B testing
OAuth authentication
geolocation
localization/globalization
and more!

And even without writing your own edge functions, you can easily take advantage of the latest server-side rendering (SSR) and middleware features from frameworks like Astro, 11ty, Hydrogen, Next.js, Nuxt, Remix, and SvelteKit.

Getting Started
Writing your first Edge Function is as easy as adding a hello.js to netlify/edge-functions in your repository:

export default ()=> new Response(“Hello world”)
and registering it in your netlify.toml:

[[edge_functions]]
function=”hello”
path=”/test”
Check out more examples here to see how Edge Functions can customize, lock down, or analyze your site.

JavaScript Frameworks Galore!
As part of this release, we’ve also been working very closely with our friends across the JavaScript framework ecosystem to ensure that Edge Functions work great with them on day one.

Astro
Astro is a static site builder that creates highly responsive sites by using partial hydration to reduce the size of your server responses, even if you’re using other web frameworks. While Netlify already supports their recent release of server-side rendering (SSR) with traditional Netlify Functions, SSR is now faster than ever with Edge Functions.

For more information on using Astro on Netlify, check out our Astro-specific docs, as well as Astro’s latest update on using SSR with Edge Functions.

Eleventy
Eleventy (11ty) is a static site generator that uses templates built in many different languages to provide a super simple way to generate pages from HTML or Markdown using powerful template engines. With the release of Edge Functions, you can use Eleventy’s Edge plugin to performantly deliver dynamic content in your static sites.

For more information on using 11ty with Netlify, see our Eleventy-specific docs, as well as Eleventy’s new Edge plugin. And for more examples of using Edge Functions with 11ty, check out this set of demos.

Hydrogen
Hydrogen is Shopify’s edge-first web framework for building high-performance storefronts by streaming React Server Components for SSR.

For more information on using Hydrogen on Netlify, check out our Hydrogen-specific docs, as well as the hydrogen-platform Node module for more information on integrating with Edge Functions.

Next.js
This release adds support for the latest Next.js features like middleware and Streaming SSR at the edge. With Next.js middleware, you can easily intercept and transform requests using native Next.js primitives, and, much like with other SSR-enabled frameworks, Streaming SSR enables you to stream fully customized React components down from the edge to your customers.

For more information on using Next.js on Netlify, check out our Next-specific docs, as well as our example of streaming React Server Components with Next.js, and our example of using Next.js middleware.

Nuxt
Nuxt 3 is a Vue-based web framework that supports SSR to rapidly refresh page content.

For more information on using Nuxt on Netlify, check out our Nuxt-specific docs, where you’ll soon be able to find more info on using Edge Functions with Nuxt SSR.

Remix
Remix is a full stack JavaScript framework that runs in browsers and servers, taking native advantage of the edge to instantly load and refresh your sites. And given that Remix is already built on top of Web Fetch APIs, it’s a great match for the Deno support in Edge Functions.

For more information on using Remix on Netlify, check out our Remix-specific docs, as well as as well as this example of our Remix template with support for Edge Functions.

SvelteKit
We’re also working over the next week to contribute to the SvelteKit Netlify adapter to natively support SvelteKit SSR using Netlify Edge Functions.

For more information on using SvelteKit with Netlify, see our SvelteKit-specific docs.

Pricing and limits
Netlify Edge Functions are available for no additional cost on all plans, including Starter, Pro, Business, and Enterprise. For more information on how usage is limited per plan, go to our pricing page.

Try out Edge Functions today!
The combination of Netlify Functions, Background Functions, Scheduled Functions, and now Edge Functions gives developers the flexibility to apply serverless compute exactly where it makes the most sense – and it’s all tightly integrated with Netlify’s frontend development workflow.

So head on over to our docs, check out our examples, and get started with Edge Functions today! And please give us feedback and ask questions on the Netlify forums.

You can also attend a free 1-hour “Getting Started” workshop led by our developer experience team. Sign up here.

We can’t wait to see what you build with Netlify Edge Functions!

Read More
Share this on knowasiak.com to discuss with people on this topicSign up on Knowasiak.com now if you’re not registered yet.