Other Ways to SPAs

That rhymed lolz.

I mentioned on a podcast the other day that I sorta think WordPress should ship with Turbolinks. It’s a rather simple premise:

1. Build a server-rendered site.
2. Turbolinks intercepts clicks on same-origin links.
3. It uses AJAX for the HTML of the new page and replaces the current page with the new one.

In other words, turning a server-rendered app into “Single Page App” (SPA) by way of adding this library.

Why bother? It can be a little quicker. Full page refreshes can feel slow compared to an SPA. Turbolinks is kinda “old” technology, but it’s still perfectly useful. In fact, Starr Horne recently wrote a great blog post about migrating to it at Honeybadger:

Honeybadger isn’t a single page app, and it probably won’t ever be. SPAs just don’t make sense for our technical requirements. Take a look:

• Our app is mostly about displaying pages of static information.
• We crunch a lot of data to generate a single error report page.
• We have a very small team of four developers, and so we want to keep our codebase as small and simple as possible.

… There’s an approach we’ve been using for years that lets us have our cake and eat it too … and its big idea is that you can get SPA-like speed without all the JavaScript.

That’s what I mean about WordPress. It’s very good that it’s server-rendered by default, but it could also benefit from SPA stuff with a simple approach like Turbolinks. You could always add it on your own though.

Just leaving your server-rendered site isn’t a terrible thing. If you keep the pages light and resources cached, you’re probably fine.

Chrome has started some new ideas:

• “Paint Holding” reduces the white flash between page loads.
• The “Portal” element will help transition from page-to-page without reload. Note the accessibility issues.

I don’t doubt this server-rendered but enhance-into-SPA is what has helped popularize approaches like Next and Gatsby.

I don’t want to discount the power of a “real” SPA approach. The network is the main offender for slow websites, so if an app is architected to shoot across relatively tiny bits of data (rather relatively heavy huge chunks of HTML) and then calculate the smallest amount of the DOM it can re-render and do that, then that’s pretty awesome. Well, that is, until the bottleneck becomes JavaScript itself.

It’s just unfortunate that an SPA approach is often done at the cost of doing no server-side rendering at all. And similarly unfortunate is that the cost of “hydrating” a server-rendered app to become an SPA comes at the cost of tying up the main thread in JavaScript.

Damned if you do. Damned if you don’t.

Fortunately, there is a spectrum of rendering choices for choosing an appropriate architecture.