The Second framework which I picked up that's focused on Server Side Rendering is Qwik.
Qwik entered the industry in the last quarter of 2022. And it has already secured the 3rd Place right after Svelte in the State Of JS survey. This has been a framework that's constantly talked about in the tech twitter space also.
It made no sense to not include Qwik as my second SSR framework in the series
What is Qwik
Qwik is a web-framework that focuses on optimizing SSR by introducing a concept called resumability.
Qwik allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off. We'll go into resumability and other optimizations in the article as well.
As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading makes sure that the JavaScript which will be absolutely required by the user is only loaded.
SSR optimizations
When you opt for Server Side rendering, optimizations have to be made to give the end user the best experience in terms of page load.
Some frameworks like Solid and Next achieve this by a concept called Hydration / Partial Hydration while Qwik achieves this using Resumability
Hydration vs Resumability
Here is a really good article that explains both of these concepts in a very detailed manner.
During Hydration, the code needs to be executed at two places, once at the server for creating the HTML and also once at the client for prepping it up for interactions.
During HTML pre-rendering, resumability allows a framework to recover its state without re-executing the application components on the client by serializing not only the application state but also the framework state. This prevents the second execution of the code in the client side. There by making the site very fast
Learning Curve
Even though Qwik is relatively new to the scene, The documentation and tutorials are on par with some of the Seasoned Frameworks. It didn't take me long to get started with the framework.
However, Qwik does have a steep learning curve, as it provides separate functions to execute code on the server as well as the client. You'll be able to get a working site up but you'll need to invest proper time to make use of all the optimizations that Qwik is providing.
Their Discord community is also very active and were able to clarify some of my doubts on which I wasn't able to find a proper answer in the documentation.
Developer Experience
Qwik also comes bundled with Vite and Vitest and with prebuilt command line tools to deploy it to Vercel, Netlify etc. Which makes development, building and deploying super intuitive.
If you know React, you know Qwik. Qwik follows a structure which is very similar to React, built with JSX and includes all the other features that react has to offer.
For routing, I used Qwik City, which is Qwik's file-based opinionated routing system. For maintaining states I used the built in context-APIs
Conclusion
Qwik is one of the fastest frameworks focused on SSR out there and while it is production ready, the learning curve to use the framework efficiently makes me consider it as a second choice after SvelteKit.
Checkout the application here.
Top comments (0)