Qwik City: Supercharge Your Development

This article will be a part of a series of my learning and experimenting with Qwik and its meta-framework. So let's get started 🤞

Introduction

In this article let’s talk about Qwik city and how it is different from other meta-frameworks. We’ll also look into some of the best features that make Qwik City one of the best meta-framework out there.

What’s a meta-framework?

A meta-framework is basically one extra layer on a framework that provides some of the cool advancement features that are not easily accessible with only the framework. Some of the popular meta-frameworks are Gatsby and Next.js which is built on top of react.js and there are many more meta-frameworks.

What are the features of Meta-framework?

Some of the common features that a meta-framework .provide would be something like

• file or directory-based routing

• Data fetching

• Server-side rendering or SSR

• Static site generation or SSG

But the biggest this that I think it provides would-be developer experience and tooling that it adds so, for example, you absolutely could build a high-quality react.js app without one of these meta-frameworks. However, meta-framework provides all the developer experience and the tooling to make it much easier for developers to bust out and create a high-quality application as quickly as possible.

Little about Qwik Framework

There’s a saying that a faster-performing site will increase your conversion rates whatever those may be. The web is full of such depth research and shows that the faster your site is the more your conversion rates improve such as increased sales, more signups fewer users leaving your site, and many more.

What role does Qwik Play here?

There are hundreds of frameworks out there that say they are the fastest how actually is Qwik different from one of today’s popular frameworks? Basically popular frameworks today use hydration to start up a server-side rendered application the big difference is that most of today’s frameworks are replayable where as Qwikis resumable. Let’s break down these words and understand them better.

Think of a virtual machine wherein the first machine you can run an application to a certain point then freeze dry the application State and head it off to another machine. The second machine is able to pick up exactly where the first one left off. This is very similar to the resume ability for Qwik. A server is able to generate the HTML and within it include the application's current state which means how the page is currently rendered depending on the URL or any other parameter.

Hydration is entirely different in that the application needs to run twice, once on the server and then once on a browser. After the server renders HTML it ships the content to the browsers but however the client or the browser has to replay everything the server already did it needs to execute the application again so it can get back to the point where the server left it off.

This is why we called it replayable not resumable because it needs to replay the app a second time to get it up and running again and back to the same.

What makes Qwik City different?

Qwik City is a meta-framework that is built on top of the Qwik framework it has many traditional features of many meta-frameworks out there like

• Routing

• Data Fetching

• SSR / SSG

A limitation commonly seen in many of today’s meta-framework would have to be their poor time to interactivity or TTI. The amount of time it takes for the page to become interactive can often be attributed to the underlying frameworks that use the javascript hydration.

It also comes down to the frameworks that heavily rely on Javascript to get the app up and running. Because low-level frameworks have a lot of baggage meta-framework has to deal with it and make it less performant.

On the other hand, Qwik city focuses on increasing the speed of the website by reducing the unnecessary javascript and making it more performant. Here are the top features that make Qwik city different from other meta frameworks.

• Qwik City meta-framework is built on top of the Qwik so all the benefits of resume ability and extremely fast time to interact are also possible for the Qwik City application.

• Because of inheriting all the cool feature of Qwik, there is very little runtime involved at all with Qwik-city.

• It is optimized for Time To Interactive (TIL)

• Perform better HTTP Request/ Response Handling

• Support Active Prefetching

The uniqueness of Qwik City

• Active Prefetching: Qwik City avoid actively prefetching what’s possible but that does not mean that we are not prefetching important features, on the other hand, Qwik only prefetch what’s needed so for example if the only thing a user can do is click a button then that’s the only module prefetched.

• Static Site Generation SSG: Qwik City is different here because of its ability to add a heavy amount of interactivity but without a large javascript overhead. One of the reasons is full reloads are very cheap because of the resume ability concept.

• Server-Side Rendering: Qwik provides HTTP streaming by default and it does not block waiting for the entire HTML chunk. It also has support server middleware like CloudFare, Netlify, Express, etc. Integration with the Qwik City into existing servers and it does not take full control of handlers.

Hybrid Combination of SSG and SSR

One of the approaches of mixing statically generated content and dynamically rendered content, it’s really difficult to get anything faster than SSG. It comes with already rendered and no work needs to be done, but with SSR however, usually the entire tree needs to render because the application isn’t sure what’s static or dynamic

With Qwik Optimizer it does contain this information and it does know what is static and what’s dynamic. This means that while generating SSR render code we can create modules that are largely pre-rendered strings of the content. It’s not having to render the entire tree but rather concatenate all the static parts which could be most of the page and dynamically render the small sections.

Conclusion

Qwik city is a great way to get your website to load fast and make it more performant. Supports of both MPA and SPA architecture make it easy to workload the capability of the website and designed it that way. Qwik and Qwik City have made making websites so fast that it feels like magic.