20. Qwik vs React

Qwik и React — это два совершенно разных подхода к созданию веб-приложений. Оба используют JSX и компонентную архитектуру, но фундаментально отличаются в том, как они обрабатывают состояние, загрузку и интерактивность.

Философия и подход

Аспект	React	Qwik
Модель исполнения	Клиент-центричная	Сервер-первая
Гидратация	Обязательная	Отсутствует
JS при загрузке	~200-400 КБ	~1 КБ
Ленивая загрузка	Компоненты	Всё (включая обработчики)
Реактивность	Virtual DOM	Сигналы (fine-grained)
Экосистема	Огромная	Растущая

Создание компонентов

// React компонент
import { useState, useEffect } from 'react';

function Counter({ initial = 0 }) {
  const [count, setCount] = useState(initial);

  useEffect(() => {
    document.title = \`Count: \${count}\`;
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

// Qwik компонент
import { component$, useSignal, useTask$ } from '@builder.io/qwik';

export const Counter = component$<{ initial?: number }>(({ initial = 0 }) => {
  const count = useSignal(initial);

  useTask$(({ track }) => {
    const c = track(() => count.value);
    document.title = \`Count: \${c}\`;
  });

  return (
    <div>
      <p>{count.value}</p>
      <button onClick$={() => count.value++}>+</button>
    </div>
  );
});

Производительность

React

TTI зависит от размера бандла
Полный ре-рендер компонента при изменении состояния
Virtual DOM diffing
Code splitting требует React.lazy() вручную

Qwik

TTI O(1) независимо от размера
Точечные обновления через сигналы (нет VDOM)
Код автоматически разбивается на чанки
Предзагрузка по паттернам использования

Загрузка данных

// React (Next.js App Router)
async function Page({ params }) {
  const data = await fetch(\`/api/posts/\${params.id}\`);
  const post = await data.json();

  return <article>{post.title}</article>;
}

// Qwik City
export const usePost = routeLoader$(async ({ params }) => {
  return await getPost(params.id);
});

export default component$(() => {
  const post = usePost();
  return <article>{post.value.title}</article>;
});

Обработка форм

// React с React Hook Form
const { register, handleSubmit } = useForm();
const onSubmit = async (data) => {
  await fetch('/api/posts', { method: 'POST', body: JSON.stringify(data) });
};

return <form onSubmit={handleSubmit(onSubmit)}>...</form>;

// Qwik City
export const useCreatePost = routeAction$(
  async (data) => { await createPost(data); },
  zod$({ title: z.string() })
);

return <Form action={useCreatePost()}>...</Form>;
// Работает без JavaScript!

DX (Developer Experience)

React преимущества

Огромная экосистема (npm библиотеки)
Крупное сообщество
Больше обучающих ресурсов
Совместим с большинством инструментов

Qwik преимущества

Производительность из коробки
TypeScript-first
Progressive enhancement (работает без JS)
Меньше концепций для понимания

Когда выбирать что?

React/Next.js подходит для:

SaaS приложений с богатым UI
Команд с опытом React
Проектов где производительность не критична
Когда нужна богатая экосистема библиотек

Qwik/Qwik City подходит для:

Высоконагруженных публичных сайтов
E-commerce с SEO требованиями
Мобильных пользователей на слабых устройствах
Проектов где TTI критически важен