I last released a blog post back in 2021, and a lot changed in the world of web development since then. The web is full of new patterns, frameworks and libraries, and a lot of the techniques that seemed new back then are now old. React and svelte still exist, but instead of just being frameworks for creating single page apps (SPAs), they now have first class support for server side rendering (SSR) and new frameworks have emerged around them to create full stack applications: react has Next.js and Remix, and svelte has SvelteKit.
At the same time, the component re-rendering model has started to fall out of favor, with more frameworks reaching for fine-grained reactivity and observable to implement their data flows. This model predated React in frameworks like Knockout, but in recent years got a new wave of interest due to Solid.js, which is using the model to smash benchmarks for both performance and memory usage. Now, Angular, Vue, Preact and others are starting to investigate adopting the model to improve the performance of their respective frameworks.
There have also been significant advances in the way people use TypeScript. Prisma has revolutionized how we connect to our databases, and tRPC can eliminate all of the boilerplate required to build the API that connects your front end to your back end. This makes it trivial to make significant changes to a large project and still have a guarantee that everything works when you are done.
As of today, the T3 stack is probably the best way to start a new web project, which uses a few of the mentioned technologies (Prisma, tRPC, Next.js, TypeScript) to create completely type-safe full-stack applications. I have used this at work, and can attest to its incredible developer experience. But as web development is a quickly changing industry, I do not believe that these technologies will continue to be the best in the long term. They already have weaknesses, such as tRPC having weak and unergonomic SSR support when used with Next.js.
I’m not writing this blog post to unveil a new template or project creation tool just yet, and I’m not going to suggest that you drop what you are doing and rewrite whatever you have to use these technologies. I’m making a prediction of what technologies will eventually emerge as providing the best experience for both developers and users alike (at least for a few months :^) ). The MEAN stack also started as a blog post, and the T3 stack started as a collection of YouTube videos long before create-t3-app was written.
A is for Astro
Astro is a relatively new framework for creating web sites that fills a similar niche as Next.js or SvelteKit, but unlike the previously mentioned, it is not tied to any specific component library. It instead has adapters to many, including React, Svelte, Vue, Solid.js, and many more. And unlike Next.js, it is not tied to any specific hosting provider; it has adapters for several of those as well.
Currently, its main weakness for creating web applications is that it does no client-side routing (CSR). It is more like a PHP, Python or Ruby web framework in that it simply generates HTML pages, and each new page a user navigates to loses any state that the previous page had. However, CSR support is on Astro’s roadmap, and there are already experiments for this out there.
D is for Drizzle
Prisma changed the game for how we can use TypeScript when querying our databases, but still had its own set of limitations and weaknesses. It was originally designed to be language independent, and as such it has its own syntax for schemas and requires code generations. Its engines are shipped as a massive native binary written in Rust, which hurts its ability to be deployed to various environments and adds entire seconds to cold-start times (this matters a lot in serverless environments). Its query system, while intuitive, is still not as flexible as SQL.
Drizzle is a very new library that addresses these issues by providing a TypeScript SQL query builder that re-uses the existing JavaScript connectors to different databases, and allows you to specify the schema of the database in plain TypeScript. No DSLs required! Its main weakness compared to Prisma is that it does not (yet) support as many databases.
A is for Auth.js
The T3 stack makes extensive use of a library called NextAuth. As its name suggests, it was built for use with Next.js. Its maintainers are currently in the process turning it into a framework-independent library called Auth.js, and creating adapters to connect it to different app frameworks. There is already an adapter for Astro in development.
Authentication is hard, and rolling your own authentication can be an easy way to introduce security issues into your application if you don’t know exactly what you are doing. While using a 3rd party hosted authentication solution, such as Auth0 or Clerk, is increasingly popular, I still believe that having a self-hosted solution built into the stack is important. I also do not want to enshrine a 3rd party subscription service into my tech stack.
P is for PostgreSQL
Do I really need to elaborate more? It’s PostgreSQL.
Alternatively, I’ve heard good things about PlanetScale (and more importantly it also starts with a “P”), but I have not used it and I am not about to enshrine a 3rd party paid service into my tech stack.
T is for TypeScript
I also considered putting the very good TailwindCSS here, but it is not nearly as important to the rest of the stack as TypeScript, and can be swapped out for something like UnoCSS.
S is for Solid.js
Solid.js is currently a leader in both performance and usability in the front end world. It is immediately familiar to React developers, and has a growing ecosystem of components and utilities.
The Solid.js community had been developing their own app framework—SolidStart—to compete with Next.js. It has its own clever way to pass data from the server to the client that shares types like tRPC, while being more ergonomic for SSR. However, because maintaining an app framework takes a lot of time and money (React, Remix and Astro all have financial backing, and SvelteKit took 1.5 years to build), the developers of Solid.js decided to instead collaborate with Astro.
Current Status
A lot of these technologies are emerging and in heavy development. The ecosystems are a lot smaller than some of the established players, and they will take time, money and labor to catch up. But at the same time, I see them as having the right foundations to transform web development, and make a better web for both developers and users, and I am excited to see where they take us.
Leave a Reply