Using the Qwik framework to generate a static personal website with SEO support and excellent loading performance.
Approximately four years ago, I wrote an article about creating a static website using Angular and Angular Universal (now Angular SSR).
I’ve heard about the new Qwik framework for a while and how it was designed to work with a lot of thinking about performance, UX, and DX (Developer Experience).
Why did I choose to switch from Angular SSR to QWIK?
When I checked the performance scores for my simple website on the Google Lighthouse utility or Google Page Speed, I wasn’t pleased with the results on a slow network for a mobile device. Too much JavaScript code was loaded, slowing down the first loading time.
Why even bother using a framework for a simple personal website?
Nowadays, there are many options, websites, and utilities. Still, I’ve chosen to generate it using a framework that I am familiar with, so I have complete control of its structure and design, the proper DX, and a responsive design.
So, What is Qwik? and why?
This is the description from the Qwik website:
Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.
Adding that, after a few introduction videos that I’ve seen and articles I’ve read, I’ve decided to check the free online Qwik Introduction course by Shai Reznik and Miško Hevery.
Without getting into the tech details, Qwik's main idea is to receive ready HTML from the server with all the essential data and zero JavaScript. The required JavaScript for the page elements will be loaded via a web worker directly into the browser’s cache without blocking the main thread, allowing an entire page displayed on the browser with full functionality.
In recent years, we have seen a return from SPA to SSR, but with changes that will smartly mix the two. Angular added Angular SSR; React has Remix and Next, etc…
After learning from the course I mentioned previously, I’ve started a new Qwik project for my personal website, using the Qwik introduction.
I’ve started a new project by:
pnpm create qwik@latest
This command will create a new project, asking interactive questions on the project structure and required integrations (Netlify, Cloudflare, Tailwin, etc…).
The next step will be to enter the project folder (i.e., cd qwik-app) and run:
pnpm start
After building the project, I’ve used additional option to generate it to a fully static web site (SSG) by running additional command to have this support:
pnpm run qwik add static
After that, all you need to do is running:
pnpm build
pnpm build.preview
pnpm run build.server
and a new “dist” folder will be created with the static content.
This was good enough for me, but of course, there are much more advanced options with Qwik support for deploying to several services (Cloudflare, Google Cloud, etc.). You can read more about them on the documentation page.
Finally, after modifying my website with the static files generated by the Qwik builder, I uploaded them to my server and checked the Lighthouse scores, which are amazing.
Thank you for reading.
