24. Remix vs Next.js

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

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

Next.js (App Router):

export default async function UsersPage() {
  const users = await db.user.findMany();  // Server Component
  return <UserList users={users} />;
}

Remix:

export async function loader() {
  return json(await db.user.findMany());
}

export default function UsersPage() {
  const users = useLoaderData<typeof loader>();
  return <UserList users={users} />;
}

Мутации

Next.js Server Actions:

// Определяется прямо в компоненте
async function createUser(formData: FormData) {
  "use server";
  await db.user.create({ data: { name: formData.get("name") } });
  revalidatePath("/users");
}

export default function Form() {
  return (
    <form action={createUser}>
      <input name="name" />
      <button type="submit">Создать</button>
    </form>
  );
}

Remix Actions:

export async function action({ request }) {
  const formData = await request.formData();
  await db.user.create({ data: { name: formData.get("name") } });
  return redirect("/users");  // автоматическое обновление данных
}

export default function Form() {
  return (
    <Form method="post">
      <input name="name" />
      <button type="submit">Создать</button>
    </Form>
  );
}

Ключевые различия

Аспект	Remix	Next.js
Рендеринг	SSR + гидратация	RSC + SSR + SSG + ISR
Данные	loader (сервер)	RSC или getServerSideProps
Мутации	action + Form	Server Actions
Маршрутизация	Вложенная, Outlet	Файловая, app/page.tsx
Без JS	✅ Работает полностью	⚠️ Частично
Web Standards	✅✅ Первоклассные	⚠️ Абстракции
Streaming	defer + Await	Suspense + loading.tsx
Кэш	HTTP Cache-Control	React Cache + fetch кэш
Vercel	⚠️ Работает	✅✅ Родная интеграция
Деплой	Любой JS сервер	Vercel / адаптеры

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

✅ Важны веб-стандарты и HTTP
✅ Много форм и мутаций
✅ Progressive Enhancement обязателен
✅ Вложенные layouts со своими данными
✅ Нужен контроль над кэшированием

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

✅ Нужны React Server Components
✅ SSG / статические страницы (блог, docs)
✅ Деплой на Vercel
✅ ISR (обновление статики по расписанию)
✅ Нужна очень большая экосистема

Сходства

Оба фреймворка:

Файловая маршрутизация
TypeScript из коробки
SSR
Streaming
Развёртывание на множестве платформ