remix

Remix

Remix is a full-stack web framework built on web standards (Fetch API, Request/Response), providing nested routing, resilient form mutations, and seamless Vite integration.

When to Use

• Web Standards-First Full-Stack Applications: Utilizing standard Request, Response, and HTML forms via Remix / React Router v7.
• High-Performance Server-Rendered Applications: Instant page transitions with nested routing and parallel data loading.
• Resilient Web Apps with Progressive Enhancement: Applications that function reliably before JavaScript has loaded.
• Optimistic UI & Mutation Heavy Interfaces: Using useFetcher and server actions without bespoke client state machines.

Quick Start

import { json } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";

// Functions run on server
export async function loader() {
  return json(await db.getTasks());
}

export async function action({ request }) {
  const formData = await request.formData();
  await db.createTask(formData.get("title"));
  return json({ ok: true });
}

// Component runs on Client + Server
export default function Tasks() {
  const tasks = useLoaderData<typeof loader>();
  return (
    <Form method="post">
      <input name="title" />
      <button>Add</button>
    </Form>
  );
}

Core Concepts

Nested Routing & Parallel Loader Data Loading

Fetching server-side data per route segment in parallel:

// app/routes/users.$id.tsx
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, Link } from "@remix-run/react";

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

  if (!user) {
    throw new Response("User Not Found", { status: 404 });
  }

  return json({ user });
}

export default function UserDetailRoute() {
  const { user } = useLoaderData<typeof loader>();

  return (
    <div className="user-card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <Link to="edit">Edit Profile</Link>
    </div>
  );
}