At the QCon developer conference in London, Kent C Dodds, a software engineer who co-founded Remix software described flaws in the architecture of Single Page Applications (SPAs), despite their popularity today.
The big problem with PEMPA, Dodd said, is code duplication. The server generates HTML and then in order to avoid full page refresh, developers put code in the browser client that also renders HTML. “This is everywhere in a PEMPA” said Dodd, “not just for UI but also validation.”
The solution was the SPA (Single Page Application) where all that runs on the server is REST APIs. “We got rid of the rendering layer on the server side,” said Dodd. This removed the code duplication and has become the default approach for a modern web application; yet according to Dodds, removal of code duplication is the sole advantage of SPA applications over a PEMPA. The disadvantages, he said, include all the same issues that exist with PEMPAs, plus increased bundle size, high network traffic, poor runtime performance, and difficult state management. Regarding state management, he described it as “an enormous pain. Just look at NPM, you see hundreds of modules just trying to solve this problem.” NPM is the package registry for Node.js modules.
Dodds argued that the logical next transition for the web is what he calls PESPAs or Progressively Enhanced Single Page Applications. “The way that you solve the code duplication problem is by using the code on both sides,” he said. “The mental model you get feels like an MPA, that simple mental model we had over a decade ago.”
The PESPA model includes what Dodd calls browser emulation. “The framework that you’re using that implements this architecture is going to pretend that it is a browser. That’s what gives you this simple mental model.” In practice, he said, most of the code is going to be on the server, but the framework takes responsibility for calling that code.
“A lot of frameworks have started adopting this architecture,” said Dodds, “but the one that sticks out in my mind is Remix … full disclosure, I was a co-founder of Remix,” though he left the company last year to pursue other ideas. Remix uses React, which Dodds referred to as a “UI Framework,” but he said that in future it will support other UI frameworks. He also called Remix itself a “browser emulator,” enabling use of standard web APIs like the request object, but running server-side.
Is Remix really the answer? The framework did get a shout-out in the new React documentation where it is described as “a full-stack React framework with nested routing,” one of only a few frameworks to get a mention. Other frameworks though are adopting some of these same ideas, not least Next.js which has been blessed by the React team as the best way currently to adopt React Server Components which also “combines the simple request/response mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds,” according to the React team.
Separately, the Deno project has also been making the case for server-side rendering and its own Fresh framework.
The world of web application frameworks is fast-moving though, so despite Dodds’ talk being entitled “The web’s next transition” there is still plenty of room for speculation.