Eleventy Serverless (
Eleventy Cloud) Thus Far
Many of y’all following me on Twitter have probably noticed that I’ve been talking a lot about Eleventy Serverless (formerly called Eleventy Cloud). Eleventy Serverless will allow Eleventy projects to:
- Lazily render individual templates outside of your primary build using Distributed Persistent Rendering. This is super useful for large projects with a lot of templates. For example, my Twitter archive (~32K templates) could greatly benefit from this.
- Serve personalized per-user content via server-side rendering.
This blog post is an attempt to organize all of the different places I’ve talked about this feature in preparation for its debut.
Origin Story #
December 20, 2017. From the beginning of Eleventy’s existence, we exposed a Programmatic API but it was undocumented. The command line was the only recommended and supported usage. But times, they are, a-changing.
CMS Previews, build Eleventy on request #
February 25, 2021, via Tweet. While working on netlify.com, we received a request for faster Browser Previews of CMS content in Sanity. “We want to see how it renders without running a full build” So I set to work. It turned out to be much harder than I expected and required a bunch of internal changes to how Eleventy configuration files were managed. But it was successful! This was the first example of using the Eleventy Programmatic API to run Eleventy in an AWS Lambda.
Coincidentally, this was about the same time I was having a very similar discussion about running Eleventy in a serverless function with Jason Lengstorf, who was gearing up for Netlify’s upcoming On-demand Builders feature. It was this discussion that sparked the idea to deliver something more first-class in Eleventy to support both use cases: dynamic server-rendered on-every-request pages and static, lazy-rendered pages.
March 25, 2021, via Tweet. Showing off the Eleventy Sanity Previews, this was also the first debut of the Eleventy Cloud Demo, an minimum-viable template repo for running Eleventy in a serverless function. This repo was a great starter for those that wanted to try it out, but ultimately (in my opinion) still required too much manual intervention.
Eleventy RFC on GitHub #
April 3, 2021. This is probably the canonical home base for this feature, including screenshots showing the capabilities of dynamic versus static rendering modes.
Eleventy Docs Demo of On-demand Builders #
April 27, 2021, via Tweet. In this video I removed 400+ pages from the Eleventy web site build and moved them to use On-demand Builders. This sped up the main build and generated these pages on-first-request only. Subsequent requests to On-demand Builders are served a persisted version of that first request’s content.
Rename from Eleventy Cloud to Eleventy Serverless #
Big Problems Solved #
If you’re interested about the Eleventy internals changes that we had to make to facilitate this feature, you can read about the steps here:
--to=ndjsonto CLI and expose methods in the new Programmatic API too. We use these in the Serverless environment to get access to the rendered output without writing any files.
- Easy way to swap between a Build-time template and Serverless template: one change to
- Work with pagination to render only a subset of the data set for one specific page.
?querystringparameters as global data to templates.
- Allowed build-time generated Eleventy collections to be shared in serverless render (configurable per-app)
- Automatic generation of project Serverless Function bundles (config, includes, layouts, data files, templates)
- We generate the redirects necessary for serverless URLs.
- We generate the dependencies your project uses in configuration and data files (otherwise these files would be hidden from the serverless bundler)
- Huge improvements to the default bundle size, using
esbuilddropped the size from
- Work with local development using BrowserSync instead of using another dependency or requiring an emulated AWS Lambda environment. We already use BrowserSync for live reload but now it works with Eleventy Serverless locally too.
- That said, you can use
netlify devif you’d like to test Netlify Functions locally.
- That said, you can use
- Keep the plugin as provider-independent as possible, though the first iteration will use Netlify.
Next Steps #
The BrowserSync work and
esbuild stuff needs to be pulled into this plugin and polished and then it’ll be ready for a few eager folks to try out! The finish line is in sight—stay tuned!