1. Что такое Qwik

Qwik — это JavaScript-фреймворк нового поколения, созданный командой Builder.io. Его философия радикально отличается от всех существующих фреймворков: вместо того, чтобы загружать и выполнять JavaScript для «оживления» HTML-страницы, Qwik вообще избегает этого процесса.

Проблема современных фреймворков

Чтобы понять Qwik, нужно сначала понять проблему, которую он решает.

Что такое гидратация?

Когда пользователь открывает сайт на React или Vue, происходит следующее:

1. Сервер рендерит HTML (пользователь видит страницу)
2. Браузер загружает JavaScript бандл (200-500 КБ+)
3. Браузер парсит и компилирует JS
4. React выполняет весь компонентный код заново
5. React привязывает обработчики событий к DOM
6. Страница становится интерактивной ✅

Шаги 2–5 занимают 2–10 секунд на слабых устройствах!

Этот процесс называется гидратацией (hydration). Проблема в том, что:

Код выполняется дважды (на сервере и в браузере)
Пользователь видит страницу, но не может взаимодействовать с ней
Чем больше приложение — тем хуже время до интерактивности

HTML-first подход Qwik

Qwik строится на принципе HTML-first: страница рождается как HTML и остаётся HTML. JavaScript загружается по требованию, только когда нужен.

1. Сервер рендерит HTML + сериализует состояние в атрибуты
2. Браузер показывает HTML — страница УЖЕ интерактивна! ✅
3. При первом взаимодействии браузер загружает ~1 КБ Qwik runtime
4. Конкретный обработчик загружается только при срабатывании события

Resumability — главная суперсила Qwik

Resumability (возобновляемость) — это способность продолжить выполнение приложения с того места, где остановился сервер, без повторного выполнения кода.

Как это работает?

Qwik сериализует в HTML всё необходимое:

<!-- Qwik сохраняет состояние прямо в HTML -->
<div q:id="0">
  <!-- Ссылка на обработчик как URL, не как функция -->
  <button on:click="./chunk-abc.js#Counter_onClick_0BkQ6Jts">
    Count: 42
  </button>
</div>

<!-- Глобальный реестр состояния -->
<script type="qwik/json">
  {"objs": [42], "refs": {"0": "0"}}
</script>

Браузер читает HTML, восстанавливает состояние из JSON и знает, куда обратиться за кодом обработчика при необходимости.

Гидратация vs Resumability

Аспект	Гидратация (React)	Resumability (Qwik)
Начальный JS	Весь бандл	~1 КБ
Повторное выполнение	Да	Нет
Время до интерактивности	Зависит от размера	Константное
Состояние	В памяти JS	Сериализовано в HTML
Обработчики	Привязаны сразу	Загружаются лениво

Ключевые принципы Qwik

1. Никакой гидратации

Qwik не «оживляет» компоненты. Он сразу готов к работе.

2. Всё ленивое

Каждый компонент, каждый обработчик, каждый эффект — это отдельный чанк, загружаемый по требованию.

3. Сериализация вместо передачи

Вместо передачи функций между сервером и клиентом, Qwik сериализует ссылки на функции в виде URL.

4. Прогрессивная загрузка

Пользователь взаимодействует с частью страницы → загружается только нужный код для этой части.