import ImgRoutingFiles from '/media/docs/qwikcity/routing-files.png?jsx'; import PackageManagerTabs from '/components/package-manager-tabs/index.tsx';

Qwik City

While Qwik focuses on the Component API, Qwik City provides APIs that support components with common server-focused features, including the following:

• routing: Define your application routes with directory based routing. (Supports both MPA and SPA routing models.)
• pages: Render application pages, the main feature of an application.
• layouts: Define common shared page layouts to be reused across pages.
• loaders: Fetch data on the server to be used by the component.
• actions: Provide a way for the component to request the server to perform an action.
• validators: Provide a way for validating actions and loaders.
• endpoints: A way to define data endpoints for your RESTful API, GraphQL API, JSON, XML or reverse proxy.
• middleware: A centralized way to perform cross-cutting concerns such as authentication, security, caching, redirects, and logging.
• server$: A simple way to execute logic on the server.
• cache: Control caching of your content.
• env variables: API to manage reading environment variables, commonly used for keys, in a platform independent way.
• Supports both Server Side Rendering (SSR) for fully dynamic sites as well as Static Site Generation (SSG) to be hosted on static web servers and CDNs.
• vite - entry point & configuration for Qwik City.

Qwik¹ City²

Qwik¹: Core framework, stable, primitives, component model.

City²: Opinionated file-based router, middleware, endpoints, and data fetching and update.

Qwik City is a meta-framework for Qwik. Qwik City is to Qwik, what Next.js is to React, Nuxt is to Vue, SvelteKit to Svelte, and Analog is to Angular.

Qwik (core) and Qwik City (routing) solve problems at two layers of abstraction. Qwik, focuses on component and state management primitives, while Qwik City brings an opinionated and performant way to build sites at scale. We don't want to lock the ecosystem into a single correct way of building sites; in fact, we encourage the community to build alternative solutions on top of Qwik.

While Qwik City is full of useful functionality, thanks to Qwik's resumability and JavaScript streaming, there is no additional cost to the end user from Qwik City. (zero JavaScript).

Use Qwik City to build an e-commerce website, blog site, or any other website that needs routing, layouts, or data retrieval/updates. Qwik City is built on Qwik, and therefore Qwik City sites are resumable and only download the minimal amount of JavaScript with fine-grained lazy loading.

Getting Started with Qwik City

Visit Create an app using the CLI to see how to create a new Qwik City starter project. It is as simple as:

<PackageManagerTabs> <span q:slot="pnpm"> ```shell pnpm create qwik@latest ``` </span> <span q:slot="npm"> ```shell npm create qwik@latest ``` </span> <span q:slot="yarn"> ```shell yarn create qwik ``` </span> <span q:slot="bun"> ```shell bun create qwik@latest ``` </span> </PackageManagerTabs>

High Level API Overview

This table shows which file (index.tsx vs layout.tsx) the respective feature should be implemented in.

Partytown

Qwik City also comes pre-integrated with Partytown allowing you to execute your third-party code off the main thread.