- Why Eleventy?
- Getting Started
- Working with Templates
- Using Data
- Template Languages
- API Services
- Release History
Single Page Applications (SPA) with Eleventy
Multi-page architecture has a few benefits:
- Better empty-cache performance: your site can render faster, “improving user experience and business metrics” (WPO Stats). As web browsers become more privacy-focused and users use multiple web-capable devices, empty-caches visits are increasingly common.
- Inclusive and robust by default: You are in full control the minimum requirements necessary to visit your site. You needn’t put any undue burden on the capabilities of the web browser of your visitors. You needn’t place your site behind a “Best Viewed In” browser-compatibility warning. If they can view HTML, they can view an Eleventy site.
- Energy-efficiency: Lighter pages result in safer long sessions that are more energy efficient and won’t drain your visitors’ laptop or mobile device batteries.
- Searchable by default: A simpler architecture for server rendered content makes it straightforward for search engines to find you.
- Better defaults for accessibility-focused page navigations, preserving scroll position, forward/back button support, etc.
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.
Learn more about alternative approaches that can provide some of the same SPA benefits without the drawbacks:
Learn more about the trade-offs