Static Sites Do Scale: Eleventy vs. Next.js at 11ty Event

Last week the static site generator Eleventy (11ty) held a one-day virtual conference for its passionate community of web developers. In his opening keynote, Eleventy creator Zach Leatherman urged attendees to “keep building for the web.” He likened this to an act of rebellion against the dark forces driving today’s internet.

“We have nothing but algorithmic timelines on social media, we have ‘for you’ pages shovelling content at us, we have large language models generating content for us,” he said. “I really think that folks that are making and hosting and having full control of their own content on the web is so powerful — and in a way, I think it’s very subversive, too.”

I use Eleventy to run Cybercultural, my internet history website, and I love it for the “subversive” qualities Leatherman hints at. Eleventy allows you to fully control the code and content of your website via git, you can work with multiple template languages, and — perhaps most importantly — it has “zero client-side JavaScript by default across the board.” In an online world ruled by bulky JavaScript frameworks created by the big tech companies (Meta’s React, Google’s Angular, etc.), Eleventy is notable for its flexibility and performance.

Leatherman created Eleventy in 2017 and since then the tool has emerged as one of the most popular static site generators — if still relatively small compared to the likes of what Vercel and Netlify offer. In a chart, Leatherman showed where he thinks Eleventy is positioned compared to competitors like Next.js.

While he acknowledged that Eleventy is experimenting with the type of dynamic server features that Next.js excels at, Leatherman positioned Eleventy squarely in the “HTML-first” plus “Static Server (SSG)” quadrant. Interesting also that as well as positioning 11ty opposite the dynamic, “JavaScript-first” Next.js, it is also in different categories to Gatsby (a similar SSG, but JavaScript-first) and WordPress (dynamic, but HTML-first).

Leatherman was particularly focused on Next.js during his talk, since it is the most popular tool of its type. “You can use Next.js in kind of different ways,” he noted. “They’ve added what they called ‘server side rendering’ mode, which allows you to serve HTML first in the code that is downloaded by visitors to the sites that you build. But it still has its roots in single page applications.”

He added that you can also use Next.js to export a static site. While Leatherman didn’t explicitly say it, you can easily infer that Next.js has become a kind of Swiss army knife of web development. Arguably, that only adds to the complexity that Next.js has become known for.

As for Eleventy, it wants to stay put in that top-right quadrant.

“At the end of the day, I think static sites really have this amazing benefit of being the most secure, the fastest to serve,” Leatherman said.

He noted that Eleventy has now surpassed 72,000 repositories on GitHub and it’s been downloaded over 8.7 million times on npm.

Scaling 11ty: Large-Project Tooling and Web Performance

In the third 11ty Conference session of the day, Paul Everitt from JetBrains showed that you can use “large-project tooling” with Eleventy. Everitt explained that they added component-driven development through TypeScript and TSX (a templating language), unit testing with Vitest, and in-editor validation of Markdown frontmatter — all features that Everitt could do in its previous Gatsby-based system.

“People might have this idea that Eleventy is for personal blogs,” said Everitt at the end of his talk. “Let’s change that. Let’s tell people that you can do big projects. Zach continues to add what’s needed for that.”

Everitt added that Eleventy’s build time is “infinitely” better than Gatsby’s (long build times were a notorious issue for Gatsby). This point was reinforced in a presentation by Sia Karamalegos, a web performance engineer at Shopify. Karamalegos also runs a personal website on Eleventy and she offered some useful tips to improve performance, regardless of the tool you’re using.

Site Mounting

Later in the day, Eleventy’s main sponsor, the New Zealand CMS company CloudCannon, showed off a new technique that proves Eleventy isn’t just for hobby websites. Turns out, it can scale to larger web operations.

CloudCannon has a feature called “site mounting” that allows multiple sites to share the same publishing workflow, by syncing to one build image. As CloudCannon’s David Large explained, it’s “aimed at allowing large organizations to receive the same benefits of static sites and a git-based CMS as smaller single-site orgs.”

At the conference, Large and his colleague Liam Bigelow demonstrated what they called a “data lake for a group of connected sites,” which enabled content syndication and aggregation via a tool called Flatlake.

Flatlake is described as “a static API generator,” with the goal to “expose a headless CMS interface over a set of static git-based files.” It enables several sites to share their code and content.

Bigelow, the developer responsible for Flatlake, showed a demo site for a fictional big company called Real Big Company. He explained that Flatlake basically reads the content files of a static site generator “and spits out static JSON files that can be queried as an API.”

He then showed how Flatlake can “aggregate all of our content into a static API of sorts, and give every website access to this data at build time.”

Join the Web Resistance

By the end of the 11ty Conference, it was clear that Eleventy has matured as an ecosystem and become a tool that can scale beyond just personal websites. In his closing interview with CloudCannon CEO Mike Neumegen, Zach Leatherman talked up the upcoming 3.0 release, but also hinted that he’s sometimes felt the pressure of building this ecosystem.

“It definitely feels like there’s an eleventy renaissance happening right now, which is super exciting… because I don’t know if I felt that six months ago.”

Perhaps it’s that feeling of being subversive — kicking against the platform pricks — and going back to our roots as a web developer community that has led to the Eleventy Renaissance. All I can say is: vive la résistance!