Remix: Обзор

Remix — это full-stack веб-фреймворк, построенный на веб-стандартах. Он развивает идеи React Router и предоставляет мощный инструментарий для создания быстрых, доступных и надёжных веб-приложений.

Что такое Remix?

Remix — это фреймворк, который берёт лучшее из двух миров: классические многостраничные приложения (MPA) с их надёжностью и простотой, и современные SPA с богатым пользовательским интерфейсом. Результат — приложения, которые работают даже без JavaScript в браузере.

Веб-стандарты + React = Remix
─────────────────────────────
fetch API        → loader/action
FormData         → Form component
Response/Request → route handlers
URL              → file-based routing

Ключевые особенности

🗂️ Файловая маршрутизация

Каждый файл в папке app/routes/ автоматически становится маршрутом. Никаких конфигурационных файлов.

app/routes/
  index.tsx         → /
  about.tsx         → /about
  blog.$id.tsx      → /blog/:id
  user.profile.tsx  → /user/profile (layout)

📦 Loaders — загрузка данных

loader — серверная функция, которая выполняется перед рендерингом страницы. Данные передаются в компонент через useLoaderData.

export async function loader({ params }) {
  const user = await db.user.findUnique({ where: { id: params.id } });
  return json(user);
}

export default function UserPage() {
  const user = useLoaderData<typeof loader>();
  return <h1>{user.name}</h1>;
}

📝 Actions — мутации данных

action — серверная функция для обработки форм и мутаций. Работает с обычными HTML-формами через <Form>.

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  await db.user.create({ data: { name } });
  return redirect('/users');
}

🔗 Вложенные маршруты

Remix поддерживает вложенные layouts с <Outlet>. Каждый сегмент URL может иметь свой layout, данные и обработку ошибок.

⚡ Progressive Enhancement

Формы работают без JavaScript. Когда JS загружается — они становятся SPA-переходами. Это называется Progressive Enhancement.

Архитектура запроса

Браузер                    Сервер
  │                           │
  │  GET /dashboard            │
  │ ──────────────────────────▶│
  │                            │── loader() выполняется
  │                            │── данные загружаются
  │  HTML + данные             │
  │ ◀──────────────────────────│
  │                            │
  │  Form submit POST          │
  │ ──────────────────────────▶│
  │                            │── action() выполняется
  │                            │── redirect()
  │  GET /dashboard (новые данные)
  │ ◀──────────────────────────│

Сравнение с другими фреймворками

Критерий	Remix	Next.js	SvelteKit
Данные	loader/action	getServerSideProps/Server Actions	load/form actions
Маршрутизация	Вложенная	Файловая	Файловая
Мутации	Form + action	Server Actions	Form actions
Стриминг	defer/Await	Suspense	✅
Без JS	✅ Работает	⚠️ Частично	✅
Web Standards	✅✅	⚠️	✅

Почему Remix?

1. Производительность — parallel data loading, streaming, кэширование на уровне HTTP
2. Надёжность — работает без JS, graceful degradation
3. DX — понятная модель данных, TypeScript из коробки
4. Web Standards — знание fetch, FormData, Response переносится напрямую