What Web Framework to Follow in 2023?
Tags: webdev, framework, discuss, javascript
Published: 2023-02-01 23:32:47

As a _full stack dev_ with huge amount of experience under my belt, I feel like I have come full circle in the web development world. I started out with .NET starting with web forms, then MVC frameworks to SPA frameworks like Angular & then _React_, & in recent years _Next.js_ which goes back to Server Side Rendering.

Although I have spent a lot of time developing front-ends with React & loved working with it, I feel it is at a stage where it has become too complicated as its time has passed and it is trying to continuously evolve due to modern architecture demands.

Next.js was great in the early days until I started having issues with _re-hydrating_ server side data for the client, still haven't found a trivial solution for this. I am not comfortable using too much magic like _React Query_, I have used _Redux_ in most of my apps in the past but with Server Side rendering & hydration it seems a bit overkill.

So late last year I started looking at a lot of the promising new frameworks that have popped up. In order to excel at SSR most of the new frameworks have a Meta portion to it, just like Next.js is trying to be for React.

My considerations were:

- I need less worries about re-renders. Potentially fine grained reactivity should take care of this.
- I need trivial SSR/SSG from the framework.
- No partial or full hydration headaches, when to hydrate on the server so the app passes on the data to client code.
- Dont need third party packages to monitor, fetch update data. I like less magic.
- Fast rendering with good lighthouse scores.
- Coding experience closer to vanilla JavaScript/TypeScript paradigms.

Following is a brief list of frameworks I have come across: (Please keep in mind as I have not completely explored all aspects of these frameworks so I may miss features)

1. **Qwik** is a framework that I have been impressed with as it delivers constant minimal JavaScript on first load & then lazy loads JS via web workers. It has **Reactivity** which means it updates injected variables without the need for re-renders. It also has a meta portion called **QwikCity** providing server functions SSR & SSG & does not require _hydration_ as it has **resumeablility**. The syntax and concepts are very much like React so it is comfortable to pick up. The last time I looked they had some breaking changes & I feel it is not ready for prime time yet.

2. **SolidJs** is another great framework that has react like syntax, fine grained **Reactivity** & fast rendering so theoretically less worries about changing state and no worries about re-renders. It has a meta framework called **SolidStart** that provides server functions & server side rendering as well apart from plethora of other features. However SolidStart is in early development as well. I have heard issues about passing reactive variables to child components that dont get them updated.

3. There are people who swear by **Svelte** & **SvelteKit**.
It is the one that started fine grained **reactivity** trend. It is fast and compiles the code to delivery efficient JS at compile time. SvelteKit is the meta framework for Svelte that provides runtime for Svelte applications. With increasing application size however the size of the build increases.

4. **Astro** is another extremely popular website build tool.
To me it seems more like other meta frameworks that is popularizing the **islands** architecture. It is efficient in rendering fast static content at runtime and only fetching _javaScript_ for islands as they are required. On top of this it allows one to bring their own view library in it like React, SolidJs, Svelte etc.

All the above frameworks / libraries / tools are very promising however my vast experience with the react.js eco system tells me its never a bed or roses. So I am undecided as to which one of these technologies I should invest my time in for a deep dive that will be a good investment.

If you were in my shoes what would you do, please provide your feedback in the comments section.