The Trevor Project — Saving Young LGBTQ Lives
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
Menu
Eleventy 1.93s
Next.js 70.65s

Single Page Applications (SPA) with Eleventy

If you’d like to build a single page application (SPA), Eleventy probably isn’t the right tool. Eleventy projects are zero-client-JavaScript by default and use full page navigations. SPA advocates have branded this architecture as a Multi-Page Application (MPA) but fundamentally this is how the web has always operated.

Multi-page architecture has a few benefits:

Single Page Application frameworks in the last few years have pivoted away from client-side rendering to server-rendering and we welcome this improvement. However, the large client JavaScript bundles customary to SPA persist: Remix (228 kB), Next.js (248 kB), Gatsby (210 kB), and Nuxt (191 kB) 1. Notably, these sizes are only the minimum for a Hello World project and will only grow as your project grows (and as the frameworks grow, too).

These large JavaScript bundles are costly to site performance.

Single Page Application advocates argue these large, costly bundles enable performance gains for future navigations, seamless media playback during transition, and fancy transition animations. While we can debate (and even agree on some of) those points (recognizing also that they will fade into irrelevance as the web platform progresses), take a moment to consider whether or not this trade-off should be made for you as a default.

The data supports the case that Single Page Applications are a bad default for the web too. An analysis of Core Web Vitals across 9.3 million web sites in February 2023 shows that only 26% of sites built using the most popular Single Page Application framework (Next.js) have good Core Web Vitals, far lower than the web at large (40%).

With all of that said—it is possible to integrate existing third-party tools with Eleventy to solve single page application requirements—but importantly it isn’t the default choice in Eleventy nor should it be the default choice when building things for the web.

Alternatives

Learn more about alternative approaches that can provide some of the same SPA benefits without the drawbacks:

Learn more about the trade-offs

Sources

  1. Bundle-defaults for JavaScript frameworks