Zach’s ugly mug (his face) Zach Leatherman

Defaulting on Single Page Applications (SPA)

March 27, 2023 #12 Popular

If you’re trying to build a single page application (SPA), you should probably use a tool designed primarily for the job. Site generators focused on performance, shipping low to zero-client-JavaScript (e.g. the one I work on, Eleventy) typically use full page navigations. SPA advocates have rebranded this architecture as a Multi-Page Application (MPA) but fundamentally this is how the web has always operated.

Classic multi-page architecture has a few benefits:

  • Better empty-cache performance: your site can render faster.
    • As web browsers become more privacy-focused and users spread their browsing across multiple web-capable devices, empty-caches visits are increasingly common.
    • Faster sites make more money. Read WPO Stats.
    • Search engines use site performance as a search ranking signal, which makes good performance crucial.
  • 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 your 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.
  • Privacy-focused: working without client-JavaScript allows visitors full control over their viewing experience. This allows you to create sites that work best in the harsh real world environment of browser extensions, content and ad-blockers; even working with those rare folks that browse with JavaScript disabled.
  • 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 frameworks in the last few years have pivoted away from client-side rendering to server-rendering and we welcome this improvement. However, the large starting size of client JavaScript bundles customary to SPA persist: Remix (228 kB), Next.js (248 kB), Gatsby (210 kB), and Nuxt (191 kB) source. Notably, these large bundle sizes are only the minimum for a Hello World project and will only grow as your project grows (and as the frameworks grow over time, too).

You can’t JavaScript your way out of an excess-JavaScript problem. 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%).

Alternatives

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

Trade-offs


Originally posted at:

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2Fsingle-page-applications%2F/opengraph/_x202402_0/


< Newer
3 Methods for Scoped Styles in Web Components That Work Everywhere
Older >
The Eleventy v2.0 Release, a talk at the Eleventy Meetup

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and 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 77 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

57 Reposts

HN Front PageWinson TangHacker NewsHackerNewsTop10Raúl MartínezHacker News 20MayankEdward CantBen SevenHacker News BotHN With CommentsIndieWeb Avatar for https://show-hn.comHacker News記事題日本語翻訳Hacker News 50Rares Portan 🇺🇦@pere@fosstodon.orgIndieWeb Avatar for https://www.alvinashcraft.comM157q News RSSAndy BellBaldur BjarnasonFullStack BulletinICYMI HNAlistair ShepherdKristof ZerbeszakibCarlos Molina ASasha ChudesnovAlex RussellLea RosemaFynn BeckerEricFrontend DogmaIndieWeb Avatar for https://www.webaxe.orgRoderick Gadellaaphillmv@hachyderm.ioMatt Hogg 🐽Bruce B AndersonDan JacobSteven Carbaughmaarten brouwersFynn BeckerJean-Pierre VincentChristophe PorteneuveSimon MacDonaldBrian LeRoux 💚Nicolas HoizeyManuel MatuzovićEvanBryce WrayThomas BroyerSchalk Neethling 🇺🇦Jean Pierre KolbFrederik HahneStuart LangridgeDennisLMike HerchelIndieWeb Avatar for https://www.recentic.net

67 Likes

eswat42LeeElly Loel ✨🌱James GarbuttTim van der LippeRoderick GadellaaEgor KloosDawn Ahukannaelle mundySidney AlcantaraRichardDaniel MangumJordanNathan Bottomleytur1ng@mastodon.socialRowanChris (he/him)Dave MethvinDavid McCormickAlex RussellAmelia WattenbergerNicolas Lenz ❄️Cory Dransfeldt :prami:C J SilveriowestbrookDan JacobConnor BärThomas BroyerRobert KatzkiEthan MarcotteMoritzEvanjokeyrhyme@aus.socialJordan HatchLea RosemaSteven CarbaughDarren CadwalladerMatt ObeepassleFynn BeckerScott JehlJelmercalebJeffrey LembeckTyler StickaidlebergAndrew GeeMEric Newportjokeyrhyme@aus.socialJared WhiteManuel MatuzovićEvanBryce WrayThomas BroyerFrederik HahneFynn BeckerMayankandyAlexi ChepuraChris KnightStuart LangridgeDennisLCharles RoperNick FDavid ROBINJohn Colagioia

1 Bookmark

IndieWeb Avatar for https://adactio.com
26 Comments
  1. @ZachlEAt sTop bEIng sO reaSONaBlE.

  2. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @darth_mall never!! 😅

  3. Jens Oliver Meiert

    Jens Oliver Meiert

    “yOu Can’T #javaSCrIpt yOur Way Out Of An ExCESs-jAvASCRipT PROblem.” ❤️ JAvAScRiPT

  4. DennisL

    DennisL

    @zachleat Another good alternative is old-school AJAX/XMLHttpRequest – which, unfortunately isn’t popular anymore. @matuzo

  5. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @dennisl @matuzo still popular! But also kinda rebranded https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API Fetch API - Web APIs | MDN

  6. Jason Garber

    Jason Garber

    @ZACHleaT 💎 “I’m DeSPEratELy ENVIOuS Of his bEard.”

  7. @zachleat https://macwright.com/2022/09/15/hacker-news.html Hacker News

  8. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @darth_mall ha! I also liked this one https://www.youtube.com/watch?v=ga_byUbqvCc Heydon Pickering: Please Disable JavaScript To View This Site

  9. @ZAchleaT i hAd AN exTensION inStALLED tO diSaBlE js Just fOr hIs SItE 😁

  10. passle

    passle

    @zachleat Lol at the react is only 5KB. Wait until they figure out the size of react-dom

  11. Max Böck

    Max Böck

    @zachleat API? Are they talking about view transitions? But that doesn't make any sen... Oh right hackernews, my bad.

  12. Scott Jehl

    Scott Jehl

    @ZACHLEAT ExHaustiNG

  13. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @mxbck The important context here is that SPA <=> website 🫠

  14. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @SCottJehl is MY SKin HardeninG Or am I JUST MORE DeAD InSide 🙃

  15. Max Böck

    Max Böck

    @zachleat yea right. I guess "Google's propaganda runs deep"

  16. Phil Hawksworth

    Phil Hawksworth

    @ZAChLeaT deeEEEEp SIgh.

  17. @mxbck @zachleat wait, am I missing something?I thought view transitions were a) currently only in Chrome and behind a flag, and b) not available across navigations yet.Is that wrong?

  18. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @philhawksworth to be fair not all of the comments were bad!

  19. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @darth_mall @mxbck you’re trying to make sense of nonsense evan 😅the way to make a website available to any browser is to use web standards 👀

  20. Scott Jehl

    Scott Jehl

    @zachleat Building simple things the complicated way feels smarter I think. It fools me sometimes too.

  21. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @scottjehl Well said (and same!)

  22. Cory Dransfeldt :prami:

    Cory Dransfeldt :prami:

    @zachleat @scottjehl tempted to get this as a tattoo

  23. Alex Russell

    Alex Russell

    @zachleat the parallels between JS-community '23 and Flash community circa '07 are *intense*

  24. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @slightlyoff you may enjoy this 2023 post from @davatron5000 (I know I did) https://daverupert.com/2023/02/the-case-for-flex-applications/ The case for Flex applications

  25. @scottjehl @zachleat relatable

  26. Paul Mason

    Paul Mason

    @zachleat I struggle to stay calm when people compare JavaScript file size with image file size. 😖

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)