Netlify Edge Functions: A new serverless runtime powered by Deno

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
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:

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 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 (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 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.

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 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 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.

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 to discuss with people on this topicSign up on now if you’re not registered yet.

Related Articles

Windows 11 Guide

A guide on setting up your Windows 11 Desktop with all the essential Applications, Tools, and Games to make your experience with Windows 11 great! Note: You can easily convert this markdown file to a PDF in VSCode using this handy extension Markdown PDF. Getting Started Windows 11 Desktop Bypass Windows 11’s TPM, CPU and…

What’s recent in Emacs 28.1?

By Mickey Petersen It’s that time again: there’s a new major version of Emacs and, with it, a treasure trove of new features and changes.Notable features include the formal inclusion of native compilation, a technique that will greatly speed up your Emacs experience.A critical issue surrounding the use of ligatures also fixed; without it, you…

The Accepted Info to OAuth

I know what you are thinking, is this really another guide to OAuth 2.0? Well, yes and no. This guide is different than most of the others out there because it covers all of the ways that we actually use OAuth. It also covers all of the details you need to be an OAuth expert…

Stack Overflow Developer Survey 2022

Overview Developer Profile Technology Work Community Professional Developers Methodology The questions we ask in our annual survey help us improve the Stack Overflow community and the platform that serves them. The challenge and opportunity for us is to continue expanding and improving our ability to help all developers and to make them feel welcome in…