1. Что такое Remix

Remix — это full-stack веб-фреймворк нового поколения, созданный командой React Router. Его главная идея: не изобретать велосипед, а опираться на веб-стандарты, которые уже существуют и отлично работают.

История и эволюция

Remix создан теми же людьми, что написали React Router — самый популярный роутер для React. В 2021 году они решили сделать шаг вперёд: взять всё лучшее из React Router и добавить server-side rendering, loaders, actions и многое другое.

История React Router → Remix
────────────────────────────
2014: React Router v1 — первый роутер для React
2016: React Router v4 — компонентный подход
2021: Remix v1 — full-stack с серверной стороной
2022: Remix v2 — улучшенный DX, плоские маршруты
2024: React Router v7 = Remix (слияние!)

Философия веб-стандартов

Remix не создаёт новых абстракций там, где их не нужно. Вместо этого он использует то, что уже есть в браузере и HTTP:

Веб-стандарт	Как используется в Remix
`fetch API`	Основа для загрузки данных
`FormData`	Обработка форм в action
`Request/Response`	Интерфейс loader/action
`URL`	Файловая маршрутизация
`HTTP кэш`	Заголовки Cache-Control
`Cookies`	Сессии и аутентификация

MPA + SPA = Remix

Традиционно веб-разработчики выбирали между двумя подходами:

MPA (Multi-Page Application) — классический подход:

✅ SEO, работает без JS, надёжность
❌ Медленная навигация, перезагрузка страниц

SPA (Single-Page Application) — современный React:

✅ Быстрая навигация, богатый UI
❌ Долгая первая загрузка, проблемы с SEO

Remix объединяет оба подхода:

✅ SSR для первой загрузки (скорость, SEO)
✅ SPA-навигация после загрузки (богатый UI)
✅ Работает без JS (Progressive Enhancement)

Сравнение с Next.js

Оба фреймворка отличные. Разница — в подходе:

Next.js:                          Remix:
─────────────────────────────     ─────────────────────────────
getServerSideProps (старый)  →    loader()
Server Actions (новый)       →    action()
app/page.tsx                 →    app/routes/page.tsx
loading.tsx + Suspense       →    defer() + <Await>
middleware                   →    loader/action
next/link                    →    <Link> (React Router)

Когда выбрать Remix:

Важны веб-стандарты и HTTP
Нужна надёжная работа с формами
Важен Progressive Enhancement
Приложение с вложенными layouts

Когда выбрать Next.js:

Нужны React Server Components
Статические сайты (SSG)
Экосистема Vercel
ISR (Incremental Static Regeneration)

Архитектура Remix

┌─────────────────────────────────────────┐
│              Браузер                    │
│  ┌─────────────────────────────────┐   │
│  │   React компоненты              │   │
│  │   useLoaderData / useActionData │   │
│  │   <Link>, <Form>, <Outlet>      │   │
│  └─────────────────────────────────┘   │
└──────────────────┬──────────────────────┘
                   │ HTTP
┌──────────────────▼──────────────────────┐
│              Сервер Remix               │
│  ┌────────────┐  ┌────────────────┐    │
│  │  loader()  │  │   action()     │    │
│  │  (GET)     │  │   (POST/PUT..) │    │
│  └────────────┘  └────────────────┘    │
│  ┌──────────────────────────────────┐  │
│  │   root.tsx → layouts → routes    │  │
│  └──────────────────────────────────┘  │
└─────────────────────────────────────────┘