Qwik City: Routing, Data Loading & Slots

Qwik City is Qwik's official meta-framework, built on top of Qwik core -- providing file-based routing, layouts, and server-side data loading, analogous to how Next.js sits on top of React.

File-Based Routing & routeLoader$

// src/routes/products/[id]/index.tsx
import { component$ } from '@builder.io/qwik'
import { routeLoader$ } from '@builder.io/qwik-city'

// routeLoader$ runs on the SERVER before rendering, fetching data
// needed by this route -- analogous to loaders in Remix or
// getServerSideProps in Next.js
export const useProductData = routeLoader$(async ({ params }) => {
  return await db.getProduct(params.id)
})

export default component$(() => {
  const product = useProductData()

  return <h1>{product.value.name}</h1>
})

Layouts

// src/routes/layout.tsx -- automatically wraps all routes
// beneath it in the file-system hierarchy
import { component$, Slot } from '@builder.io/qwik'

export default component$(() => {
  return (
    <div>
      <nav>{/* shared navigation */}</nav>
      <main>
        {/* Slot renders whatever child route/content is passed in --
            conceptually similar to `children` in React */}
        <Slot />
      </main>
    </div>
  )
})

Content Projection with Slot

export const Card = component$(() => {
  return (
    <div class="card">
      <Slot />
    </div>
  )
})

// Usage -- the <p> becomes the Card's Slot content
<Card>
  <p>This renders inside the card.</p>
</Card>

When to Reach for Qwik

• Best suited to large, content-heavy or interaction-heavy applications where hydration cost with a traditional framework would be significant.

• For small apps with minimal interactivity, the performance benefit over React/Vue is negligible -- the tradeoff is a smaller ecosystem than more established frameworks.

• JSX syntax closely mirrors React's, keeping the authoring experience familiar even though the underlying execution model (resumability, fine-grained signals) is fundamentally different.

• TypeScript support is first-class throughout -- signals, route loaders, and component props are all typed without extra configuration.