Zach’s ugly mug (his face) Zach Leatherman

Eleventy: Build vs. Serverless vs. Edge

April 21, 2022 Watch in 21 minutes

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: Eleventy: Build vs. Serverless vs. 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 right2017 Build, 2021 Serverless, 2022 EdgeA large “Build” text on a background of a large tree with rootsStatic files: Fastest to load, most portable, simplest to host $$$Data (a cloud of a bunch of Headless CMS provider logos)Data to HTMLMatthew 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 rackThe text “Serverless first” is crossed out, instead Static firstNetlify Functions (run on every request) On-demand Builders (run on first request, cache for subsequent)Slide 13Slide 14Slide 15Slide 16A large “Edge” text on a background of a diving board over a lakeThe text “Edge first” is crossed out, instead Static firstEdge: Fast! Personalized. *Not* cachedInstallation instructions for Eleventy Edge, add to .eleventy.js, netlify.toml, and a content file at index.liquidSlide 21Slide 22Comparing Performance: Build is the best, Serverless is the worst, On-demand Builders are great when cached, and Edge is pretty fast with a 50ms maxComparing 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 /monthComparing Request-level Features: Build has none, Serverless and Edge have access to Headers Cookies, Forms, URLSearchParams, On-demand builders have noneCase StudySlide 27Slide 28Screenshot of a Netlify Deploy log for the old 0.12.x Eleventy docs: 495 files in 53.65 secondsSlide 30Screenshot of a Netlify Deploy log for the new 1.x Eleventy docs: 145 files in 29.73 secondsSlide 32/* Build, /authors/* ServerlessSlide 34Zoomed 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, /* EdgeA table summarizing the previous slides comparing Build Serverless On-demand Builders, and Edge across Performance, Netlify Free Tier, Cost, and Request-level featuresFor any project mix and match Build, Serverless, and EdgeFor any route/page: mix and match Build, Serverless, Edge, Build + Edge, Serverless + Edge

Tags: Eleventy Speaking 1,587 Views

< Newer
Three Million npm Downloads for Eleventy
Older >
Semverflation: a new software metric proposal

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

7 Reposts

Eleventy 🎈 2.0.0-canary.8Matt BiilmannEleventyMeetupnftcryptomixIndieWeb Avatar for https://www.alvinashcraft.comNick Taylor (he/him)Dan Denney

62 Likes

Elly ✨🌱Colin FahrionAdamJesse ScarylandCasey Robinson👨🏻‍💻Joshua YoestanangularShreeMr. SirMadza 🇺🇦🙏Benjamin Grieskev eAshur CabreraOwen Buckley ♻️Guillaume DeblockEric WallaceNick Taylor (he/him)jackJakebertrandkellerChris CoyierEric WallaceJess Peck 🐍🤖kitajchukNiki 🇺🇦Jordan SaynerilltronPatrick HaugMWDelaneyJens GrochtdreisAlistair ShepherdÓscar GarcíaMarc Littlemore 👋🏻Chris PilswortheddyMichel van der KroefisobolewskibertrandkellerClément DelmasStephanie EcklesRichard HerbertGonzalo GuevaranftcryptomixEleventyMeetupJohn MeyerhoferMatt Rossman 🍌Brett Jankord Matt Biilmann⚡️Lindsey⚡️Eleventy 🎈 2.0.0-canary.8Todd Libby 🇺🇦Simon Pieters 💉💉💉Nicholas AlmeidaEduardo UribeIlja | ИльяMike AparicioSean van ZuidamTodd MoreyjmalkGaël PoupardBob MonsourElliott Marquez
11 Comments
  1. Christian Miles

    what are these? slides for ants? 🐜🐜🐜

  2. Zach Leatherman

    hahaha, well okay, bug report 😅

  3. Jonny B Boosted

    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!

  4. kitajchuk

    👀

  5. Zach Leatherman

    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!

  6. kitajchuk

    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 🤘

  7. Eleventy 🎈 2.0.0-canary.8

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

  8. Šime (she-meh) 🦊

    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.

  9. Zach Leatherman

    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

  10. Šime (she-meh) 🦊

    I’m seeing the issue in all browsers. Switching to overlay scrollbars didn’t help.

  11. Zach Leatherman—bring back @mmatuzo

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

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)