Netlify Edge Functions: A new serverless runtime powered by Deno
My colleague says this plugin is very astonishing!!
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.
Edge Functions is a clean-sheet rewrite for Netlify. They work as their own endpoints, enabling:
streaming edge rendering
React Server Components
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.
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.
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.
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!
Share this on knowasiak.com to discuss with people on this topicSign up on Knowasiak.com now if you’re not registered yet.