DEV Community

Alex Spinov
Alex Spinov

Posted on

Remix Has a Free API: Web Standards First, Framework Second

Remix doesn't add abstractions on top of the web platform. It removes them.

What Is Remix?

Remix is a full-stack React framework that embraces web standards — Request, Response, FormData, Headers. Now part of React Router v7, it gives you nested routing with parallel data loading, SSR, progressive enhancement, and error boundaries.

The Loader/Action Pattern

// app/routes/posts.$id.tsx
import { json } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";

export async function loader({ params }) {
  const post = await db.post.findUnique({ where: { id: params.id } });
  if (!post) throw new Response("Not Found", { status: 404 });
  return json({ post });
}

export async function action({ request, params }) {
  const formData = await request.formData();
  await db.post.update({ where: { id: params.id }, data: { title: formData.get("title") } });
  return json({ success: true });
}

export default function Post() {
  const { post } = useLoaderData();
  return (
    <Form method="post">
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </Form>
  );
}
Enter fullscreen mode Exit fullscreen mode

No useEffect. No useState for server data. No loading spinners to manage.

Nested Routes: Parallel Data Loading

When you navigate to /dashboard/analytics, BOTH parent and child loaders fire simultaneously. In Next.js, you'd have a waterfall.

Why Remix

  • Progressive enhancement — Forms work without JavaScript
  • Error boundaries per route — One broken component doesn't crash the whole page
  • No client-side state management — The URL IS your state
  • Web standards — Learn Remix, learn the web
npx create-remix@latest my-app && cd my-app && npm run dev
Enter fullscreen mode Exit fullscreen mode

Need custom web solutions or data tools? Check out my scraping toolkit or email spinov001@gmail.com.

Top comments (0)