Remix Has a Free Full-Stack React Framework With Nested Routes and Data Loading

#remix #react #fullstack #opensource

Remix is a full-stack React framework focused on web fundamentals. It uses nested routes, progressive enhancement, and server-side rendering by default.

What You Get for Free

Nested routes — parallel data loading
Server-side rendering — fast initial load
Progressive enhancement — works without JS
Error boundaries — per-route error handling
Form handling — native form submissions
Streaming — React 18 streaming SSR
Deploy anywhere — Vercel, Cloudflare, AWS, Node

Route With Data Loading

import { json, useLoaderData } from '@remix-run/react';

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

export default function Users() {
  const { users } = useLoaderData<typeof loader>();
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Form Handling

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