Qwik City Has a Free API That Most Developers Don't Know About

Qwik City is the full-stack meta-framework for Qwik that provides file-based routing, server-side data loading, and edge-ready deployment with zero JS by default.

Routeloader (Server Data)

// src/routes/posts/index.tsx
import { routeLoader$ } from "@builder.io/qwik-city";

export const usePosts = routeLoader$(async ({ query }) => {
  const page = parseInt(query.get("page") || "1");
  const res = await fetch(`https://api.example.com/posts?page=${page}`);
  return res.json();
});

export default component$(() => {
  const posts = usePosts();
  return (
    <ul>
      {posts.value.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
});

RouteAction (Server Mutations)

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

export const useCreatePost = routeAction$(
  async (data, { redirect }) => {
    await db.post.create({ data });
    throw redirect(303, "/posts");
  },
  zod$({ title: z.string().min(1), content: z.string().min(10) })
);

export default component$(() => {
  const action = useCreatePost();
  return (
    <Form action={action}>
      <input name="title" />
      <textarea name="content" />
      <button type="submit">Create</button>
      {action.value?.fieldErrors?.title && <p>{action.value.fieldErrors.title}</p>}
    </Form>
  );
});

Middleware

// src/routes/layout.tsx
import { routeLoader$ } from "@builder.io/qwik-city";

export const useAuth = routeLoader$(async ({ cookie, redirect }) => {
  const token = cookie.get("token")?.value;
  if (!token) throw redirect(303, "/login");
  return verifyToken(token);
});

Server$ (Server Functions)

import { server$ } from "@builder.io/qwik-city";

const processPayment = server$(async function(amount: number) {
  // This ONLY runs on the server
  const result = await stripe.charges.create({ amount });
  return { success: true, id: result.id };
});

Key Features

• Zero JS sent to browser by default (resumability)
• File-based routing with nested layouts
• Zod validation built into route actions
• Server functions with server$
• Edge deployment on any platform

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.