Zach’s ugly mug (his face) Zach Leat­herman

Eleventy: Build vs. Serverless vs. Edge

Watch in 21 minutes 39 slides April 21, 2022

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: State Of Eleventy: April 2022 - Zach Leatherman at THE Eleventy Meetup

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
2017 Build, 2021 Serverless, 2022 Edge
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)
Data to HTML
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)
Slide 13
Slide 14
Slide 15
Slide 16
A large “Edge” text on a background of a diving board over a lake
The text “Edge first” is crossed out, instead Static first
Edge: Fast! Personalized. *Not* cached
Installation instructions for Eleventy Edge, add to .eleventy.js, netlify.toml, and a content file at index.liquid
Slide 21
Slide 22
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
Case Study
Slide 27
Slide 28
Screenshot of a Netlify Deploy log for the old 0.12.x Eleventy docs: 495 files in 53.65 seconds
Slide 30
Screenshot of a Netlify Deploy log for the new 1.x Eleventy docs: 145 files in 29.73 seconds
Slide 32
/* Build, /authors/* Serverless
Slide 34
Zoomed in screenshot of the Eleventy Possum Logo on 11ty.dev with zachleat’s avatar in the middle of the ballon—an arrow is pointing to it from the JS logo
/* 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

Tags: Eleventy Speaking

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 86 talks in nine different countries at events like Beyond Tellerrand, State of the Browser, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Learn more about Zach »