Eleventy: Build vs. Serverless vs. Edge

April 21, 2022 Watch in 21 minutes Tagged: Eleventy Speaking

Originally a talk given at: https://11tymeetup.dev/events/ep-8-state-of-the-possumverse-and-panel-on-transitioning-to-11ty/

This was a talk given at the Eleventy Meetup (11tymeetup.dev). While it was originally titled a “State of 11ty” talk, it somehow got laser-focused on differentiating between the Eleventy rendering modes: Build, Serverless, and Edge.

Watch on YouTube. Video courtesy of the Eleventy Meetup YouTube channel.

Slides

The State of 11ty, 2022 Edition (with the latest possum balloon mascot floating)

Terrible cursed images of Zach wearing a patagonia vest, and Zach’s head on the classic Stonks image with an arrow going up and to the right

A large “Build” text on a background of a large tree with roots

Static files: Fastest to load, most portable, simplest to host $$$

Data (a cloud of a bunch of Headless CMS provider logos)

Matthew Phillips tweets “I think what’s great about Eleventy is how it was able to simplify SSGs to just 2 concepts: data sources and templates”

A screenshot of the 11ty.dev Netlify Deploys screen, with text saying “oopsie daisy, hot swap the site”

A large “Serverless” text on a background image of a larger server rack

The text “Serverless first” is crossed out, instead Static first

Netlify Functions (run on every request) On-demand Builders (run on first request, cache for subsequent)

A large “Edge” text on a background of a diving board over a lake

The text “Edge first” is crossed out, instead Static first

Installation instructions for Eleventy Edge, add to .eleventy.js, netlify.toml, and a content file at index.liquid

Comparing Performance: Build is the best, Serverless is the worst, On-demand Builders are great when cached, and Edge is pretty fast with a 50ms max

Comparing Cost: build templates pay up front with build minutes, Serverless and Edge are charged per request, On-demand builders only charge for first request. Netlify’s free tier offers 300 build minutes per month, Serverless (including On-demand builders) 125k requests/site/month, Edge 3M /month

Comparing Request-level Features: Build has none, Serverless and Edge have access to Headers Cookies, Forms, URLSearchParams, On-demand builders have none

Screenshot of a Netlify Deploy log for the old 0.12.x Eleventy docs: 495 files in 53.65 seconds

Screenshot of a Netlify Deploy log for the new 1.x Eleventy docs: 145 files in 29.73 seconds

/* Build, /authors/* Serverless, /* Edge

A table summarizing the previous slides comparing Build Serverless On-demand Builders, and Edge across Performance, Netlify Free Tier, Cost, and Request-level features

For any project mix and match Build, Serverless, and Edge

For any route/page: mix and match Build, Serverless, Edge, Build + Edge, Serverless + Edge

Scroll for slide content →

Zach is a builder for the web. He created Eleventy (11ty), an award-winning open source site generator now full-time sponsored by Netlify. At one point he became entirely too fixated on web fonts. He has given 63 talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Filament Group, NEJS CONF, and NebraskaJS. Read more about Zach »

Previous: Three Million npm Downloads for Eleventy
Next: Semverflation: a new software metric proposal

7 Reposts

62 Likes

11 Comments

@cjlmiles
22 Apr 2022

what are these? slides for ants? 🐜🐜🐜
@zachleat
22 Apr 2022

hahaha, well okay, bug report 😅
@SCRWD
22 Apr 2022

Seems to suggest Edge is similar to Serverless but less expensive (more free quota)… I'm waiting for the audio/video portion too as I'm guessing there is more discussion about it there :) Thanks Zach!
@kitajchuk
22 Apr 2022

👀
@zachleat
22 Apr 2022

Yeah! That was a Q&A question that came up too—personally I like to use Serverless for ODB (and repeat cached requests don’t go towards the quota). On the other hand, Edge invocations are never cached so your usage will likely be higher there!
@kitajchuk
22 Apr 2022

This looks like a great feature. I have a site built on an old custom static framework I’d like to migrate. @eleven_ty seems like a perfect fit so I’ve been reading up. The site already uses ejs templates and @Netlify functions so the transition seems logical 🤘
@eleven_ty
22 Apr 2022

Awesome! For `ejs` specifically as disclosure you will likely want to read this section of the docs: 11ty.dev/docs/plugins/e…
@simevidas
22 Apr 2022

therE’S soMETHiNG wroNg. tHe imaGES ArE Cut off (thErE sHouLD bE a UrL BelOW THE wInDoW iN tHe SLiDE), ANd iT gEtS wORSe WHeN i ZOom the PaGe.
@zachleat
22 Apr 2022

Maybe a bug with aspect-ratio and obtrusive scrollbars? Mac OS + Firefox right? Seems to be working over here on FF 99 and FF Nightly—even across the different scrollbar OS preferences
@simevidas
22 Apr 2022

I’m seeing the issue in all browsers. Switching to overlay scrollbars didn’t help.
@zachleat
28 Oct 2022

Learn more in this talk: zachleat.com/web/eleventy-r…

Shamelessly plug your related post:

These are webmentions via the IndieWeb and webmention.io.

Eleventy: Build vs. Serverless vs. Edge

Slides #

7 Reposts

62 Likes

@cjlmiles

@zachleat

@SCRWD

@kitajchuk

@zachleat

@kitajchuk

@eleven_ty

@simevidas

@zachleat

@simevidas

@zachleat

Shamelessly plug your related post:

Slides