This content originally appeared on Go Make Things and was authored by Go Make Things
A few years back, the folks over at 37Signals unveiled a “revolutionary” approach to building web apps: sending HTML instead of JSON to render the page.
I’m not going to link to it, because I don’t support fascists, but the root idea was pretty good…
How it works
If you’re going to update a chunk of content on a page based on an API call, have the server send back the HTML to be displayed instead of JSON that you convert into JSON.
Converting JSON to HTML is slow and costly. Replacing some HTML with already generated HTML is faster and easier. It also makes it trivial to progressively enhance the experience.
It’s great for dynamically updating pieces of an existing UI.
This isn’t revolutionary. It’s how we used to build websites. But it was contrarian at the time.
Taking it too far
Somehow, this approach got bastardized into doing this for full page reloads, too.
The thinking goes, when someone clicks a link, fetch the new page with JavaScript, compare the new HTML to the existing one, and update just the stuff that needs to change.
In theory, you can speed up page loads because you’re not reloading a bunch of existing assets. An unlike traditional SPA approaches, you don’t need to convert JSON to HTML.
More recently, I’ve seen a lot of folks advocate for using HTMX’s hx-boost attribute to do this (and nothing else).
I think this is a bad idea
I dislike this approach for the same reason I dislike SPAs in general.
It breaks a bunch of stuff that browsers give you for free, out-of-the-box, and recreates them with expensive, slow JavaScript. It often breaks accessibility, too.
I actually built a tool that uses this approach at a previous job. It worked, but there are so many annoying edge cases you need to account for. Shipping all of that JS just doesn’t make sense.
What about performance, though?
The argument, as is also the case with SPAs, is that not reloading all the things boosts performance.
And that can definitely be true!
But if your performance is slow because you’re loading large amounts of CSS and JavaScript… fix that! Refactor your code. Write or ship less of it. Cache things. Preload things. Optimize.
Using HTML-over-the-wire for full page loads is a band-aid on a bigger issue.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-01-07T14:30:00+00:00) HTML-over-the-wire is overrated. Retrieved from https://www.scien.cx/2025/01/07/html-over-the-wire-is-overrated/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.