Hi! I made a transition from Qwik to Astro. If you’re familiar with Qwik, you might be wondering why I chose it in the first place. It’s a solid framework, and I’ll definitely use it in future projects but for a content-driven website, it wasn’t the best fit.
The Qwik
Qwik is a framework that enables instant-loading web apps, without effort (yes, that’s the description on GitHub 😆). It uses JSX (like React) and a variety of techniques to achieve instant loading and speed, such as service workers, prefetch, resumability, and more.
To generate a static website with Qwik, you can use Qwik’s Static Site Adapter. By utilizing the static adapter, MDX, and plugins for syntax highlighting and TeX, I created the first version of izolipe.com.
Qwik is ideal for JavaScript rely websites.
Qwik is good for websites that require JavaScript. It splits the JavaScript into small chunks and loads them as needed by your app. However, this is why Qwik is not the best choice for my website. Most of the pages contain minimal JavaScript—just analytics. Actually, there are no components or pages with reactivity provided by a framework
The Astro
Astro is a framework designed for developing content-driven websites. It optimizes JavaScript usage through a architecture called “Astro Islands”, which renders the majority of the site as static HTML while using small, interactive “islands” of JavaScript for reactivity.
Using Astro and MDX, I created the second version of izolipe.com.
Astro offers an excellent workflow, allowing you to structure your site with layouts, pages, components, and more. To build components, you can use one or more frameworks (even Qwik). That’s why I use Astro: for its great workflow, flexibility, and the freedom it provides! 🗽
Astro with Qwik
Qwik integrates with Astro, allowing you to use Qwik components within Astro while maintaining Qwik’s resumability.
// counter.tsx
import { component$, useSignal } from "@builder.io/qwik";
export default component$(() => {
const counter = useSignal(0);
return (
<div>
<h2>{counter.value}</h2>
<button onClick$={() => counter.value++}>+</button>
<button onClick$={() => counter.value--}>-</button>
</div>
);
});---
// index.astro
import Counter from "../components/counter";
---
<html lang="en">
<body>
<h1>Astro.js - Qwik</h1>
<!-- no hydration directive (client:* or server:*)! -->
<Counter />
</body>
</html>It’s good because Qwik components don’t need hydration (unlike Astro islands), which makes things faster ⚡.
So… Why not Qwik with Astro?
Because my website doesn’t heavily rely on JavaScript, components, and so on, I do everything with VanillaJS, which is fast as hell 😎.
However, the door to using Qwik isn’t closed. I might incorporate it into certain parts of my website in the future.
The Future of Izolipe
Izolipe is my personal brand. I want people to see Izolipe as a place where they can find useful, well-organized notes on various subjects and tools. That’s why the Izolipe logo is the division operator—it represents my mission to “divide knowledge with you ❤️.”
Looking ahead, I plan to add more high-quality content to my website, create useful free tools, write more blog posts. Stay tuned for exciting updates! 😆