Qwik City Has a Free API You've Never Heard Of

Qwik is a framework that achieves instant-loading web apps through resumability. Instead of hydration (re-executing all JavaScript), Qwik resumes from where the server left off — zero JavaScript on page load.

What Makes Qwik Special?

• Resumability — no hydration, instant interactivity
• Zero JS on load — JavaScript loads only when needed
• O(1) startup — constant time regardless of app complexity
• Familiar — React-like JSX syntax
• Edge-ready — optimized for edge deployment

The Hidden API: Lazy Loading Everything

import { component$, useSignal, $ } from '@builder.io/qwik';
import type { RequestHandler } from '@builder.io/qwik-city';

// Data loading — runs on server
export const onGet: RequestHandler = async ({ json }) => {
  const products = await db.product.findMany({ take: 20 });
  json(200, products);
};

export default component$(() => {
  const count = useSignal(0);

  // This handler is LAZY — only loads when user clicks!
  const handleClick = $(() => {
    count.value++;
    console.log('Clicked!', count.value);
  });

  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={handleClick}>Increment</button>
    </div>
  );
});

Server Actions API

import { routeAction$, zod$, z, Form } from '@builder.io/qwik-city';

export const useCreateProduct = routeAction$(
  async (data) => {
    const product = await db.product.create({ data });
    return { success: true, id: product.id };
  },
  zod$({
    title: z.string().min(1),
    price: z.number().positive(),
    description: z.string().optional()
  })
);

export default component$(() => {
  const action = useCreateProduct();

  return (
    <Form action={action}>
      <input name="title" required />
      <input name="price" type="number" required />
      <button type="submit" disabled={action.isRunning}>
        {action.isRunning ? 'Creating...' : 'Create'}
      </button>
      {action.value?.success && <p>Created: {action.value.id}</p>}
    </Form>
  );
});

Route Loaders API

import { routeLoader$ } from '@builder.io/qwik-city';

export const useProducts = routeLoader$(async () => {
  return await db.product.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
    take: 20
  });
});

export default component$(() => {
  const products = useProducts();

  return (
    <ul>
      {products.value.map(p => (
        <li key={p.id}>{p.title} — ${p.price}</li>
      ))}
    </ul>
  );
});

Quick Start

npm create qwik@latest
cd my-app && npm start

Why Performance Matters

A developer shared: "Our e-commerce site had 3.2s Time-to-Interactive with Next.js. We rebuilt with Qwik — TTI dropped to 0.4s. Zero JavaScript on initial load means the page is interactive the moment HTML arrives. Our conversion rate jumped 23%."

---

Building blazing-fast sites? Email [e-mail] or check my tools.

Hydration or resumability? Have you benchmarked Qwik vs Next.js?