Use Eleventy Edge to deliver dynamic web sites on the Edge

2022 April 19

zachleat

Subscribe to the Eleventy News Feed

I am very proud to introduce a brand new addition to Eleventy: Eleventy Edge.

Eleventy Edge is an exciting new way to add dynamic content to your Eleventy templates. With a simple Eleventy shortcode you can opt-in a part of your Eleventy template to run on an Edge server, allowing your site to use dynamic, user-specific content!

A few ideas

Here are a few ideas of things you could do with the new Eleventy Edge plugin:

Any user personalized content (User accounts, premium-only content, AB testing)
Accessing/setting HTTP Headers (e.g. Cookies, Save-Data, Client Hints, etc)
Handling Forms
Using Geolocation information to localize content
A zero-clientside JavaScript Dark mode/Light mode toggle

Supplement your build

You can use Eleventy Edge with your existing projects and templates—render just a portion of your build template on the Edge:

Syntax Nunjucks, Liquid

The content outside of the `edge` shortcode is generated with the Build.

{% edge %}
The content inside of the `edge` shortcode is generated on the Edge.

* Use a query param value here.
* Use a cookie value here.
* All without clientside JS.
{% endedge %}

This feature makes heavy use of Netlify’s new Edge Functions feature to run Eleventy in Deno on Edge servers. It continues Eleventy’s architectural dedication to markup-first zero-clientside JavaScript solutions to deliver the fast and scalable dynamic web sites. Check out our introductory demos and watch for more content to come discussing this exciting new feature.

Use Eleventy Edge to deliver dynamic web sites on the Edge

A few ideas

Supplement your build

More around the web

Read more blog posts: