Qwik City

В то время как Qwik фокусируется на API компонента, Qwik City содержит API для поддержки компонента с общими функциями, ориентированными на сервер:

• маршрутизация: Определяет маршруты приложений с помощью маршрутизации на основе каталога (поддерживаются модели маршрутизации MPA и SPA);
• страницы: Рендер страниц приложения, главной особенности приложения;
• макеты: Определяет общие макеты страниц для повторного использования на всех страницах;
• загрузчики: Получение данных на сервере для использования компонентом;
• действия: Предоставляет компоненту возможность запросить сервер для выполнения действия;
• валидаторы: Предоставляет возможность проверки действий и загрузчиков.
• конечные точки: Способ определения конечных точек данных для вашего RESTful API, GraphQL API, JSON, XML или обратный прокси;
• промежуточное ПО: Централизованный способ выполнения сквозных задач, таких как аутентификация, безопасность, кэширование, перенаправления и ведение журнала;
• server$: Простой способ выполнения логики на сервере;
• кэширование: Контролирует кэширование вашего контента;
• переменные окружения: API для управления чтением переменных окружения, обычно используемых для ключей, независимым от платформы способом;
• Поддерживает как рендер на стороне сервера (SSR) для полностью динамических сайтов, так и генерацию статических страниц (SSG) для размещения на статических веб-серверах и CDN.

Qwik¹ City²

Qwik¹: Ядро фреймворка, стабильные примитивы, компонентная модель.

City²: Маршрутизатор на основе файлов, промежуточное программное обеспечение, конечные точки, получение и обновление данных.

Мы называем это мета-фреймворком для Qwik. Qwik City является для Qwik тем же, чем Next.js для React, Nuxt для Vue, SvelteKit для Svelte, и Analog для Angular.

Qwik (ядро) и Qwik City (маршрутизация) решают проблемы на двух уровнях абстракции. Qwik сосредотачивает в себе примитивы управления компонентами и состояниями, в то время как Qwik City предлагает масштабируемый и производительный способ создания сайтов. Мы не хотим замыкать экосистему на одном правильном способе создания сайтов, более того, мы поощряем сообщество создавать альтернативные решения на базе Qwik.

Хотя Qwik City полон полезных функций, благодаря возобновляемости Qwik и потоковой передаче JavaScript, конечный пользователь не несёт никаких дополнительных затрат от Qwik City (нулевой JavaScript).

Используйте Qwik City для создания сайта электронной коммерции, сайта блога или любого другого сайта, нуждающегося в маршрутизации, компоновке или поиске/обновлении данных. Qwik City построен на Qwik, и поэтому сайты Qwik City возобновляемы и загружают только минимальное количество JavaScript с тонкой ленивой загрузкой.

Начало работы с Qwik City

Посетите раздел Создание приложения с помощью CLI чтобы узнать, как создать новый стартовый проект Qwik City. Это очень просто:

npm create qwik@latest
pnpm create qwik@latest
yarn create qwik
bun create qwik@latest

Обзор API высокого уровня

Эта таблица показывает, в каком файле (index.tsx или layout.tsx) должна быть реализована соответствующая функция.

Partytown

Qwik City также поставляется предварительно интегрированным с Partytown, позволяя вам выполнять сторонний код вне основного потока.