Full Stack SPA Frameworks

Spencer
Spencer
Full Stack SPA Frameworks

Photo by Skitterphoto from Pexels

There are a number of important projects happening in JS / TypeScript land that intend to make SPA development easier.

At the end of the day, they are all SPAs applications designed to be delivered over CDNs. Most of the options are based on React, and with a few exceptions in Svelte and Vue, mentioned below.

The general theme is server-rendering the initial page-load, hydrating on the client, and then the SPA framework takes over on the client. Depending on if it's batteries included or not, the framework solves for data-loading, code-splitting and tree-shaking, routing, server-side functions/apis, and session management.

Next.js

Next claims to be "The React Framework for Production." It has pioneered file-based routing along with server-rendering React components.

It is hugely popular (certainly the most popular on this list) and has corporate backing from the JS powerhouse Vercel, but it is not opinionated about the data layer. So, I think it fits the bill for full-stack SPA frameworks but isn't quite as full-stack as some of the others.

There are similar projects following in the footsteps in the Vue community - Nuxt.js (with a hat-tip in the naming).

Blitz.js

Blitz is a fullstack stack React framework inspired by Ruby on Rails, and it intends to be a high-productivity React framework.

Blitz is a framework for the 99% of us at companies with <100 employees. source

Blitz claims to have a "'Zero-API' data layer" and that you import server-code directly into your client. This sounds scary at first, but what happens under the hood is that client-side imports are swapped out for network requests. (Honestly, still a little scared.)

It wraps Next.js under the hood, so you get all the goodies from Next.js too.

And Blitz is definitely batteries included: authentication, session managment, persistance layer, etc.

Blitz looks super promising and worth looking more closely at.

Redwood.js

Redwood.js takes a similar line to Blitz with a tagline of "Bringing full-stack to the Jamstack".

Redwood intends to take-on the JAMstack philosophy and be deployable via CDN with serverless functions running on the edge. Redwood is opinionated about it's toolchain, built on webpack, Babel, yarn, GraphQL, and Prisma.

The challenge with static sites has been dynamic content - the challenge Redwood aims to solve. It works with GraphQL and Prisma for the data layer.

Remix

Remix is still in early days and isn't open access. As of Oct 2020, the authors are selling access and since I haven't purchased a license, I can't say anything for certain. The authors have released some very popular projects like unpkg.com and React Router - certainly a promising team.

Remix claims to help "(re)discover" the web and solve for a number of problems with previous approaches

There's lots of buzz on Twitter, so I'll be keeping an eye out and posting an update once I know more.

Svelte@next

Svelte is a pretty well known SPA framework that feels similar to Vue, but is doing things very differently under the hood.

Rich Harris recently gave a virtual conference talk introducing something that feels similar to what Remix promises.

The framework is all in a private repo at this point, but it looks promising in his introduction.

Further Reading

Tom MacWright's If not SPAs, what?