# Remix — Full-Stack Web Framework on Web Fundamentals

> Remix is a full-stack React framework built on web fundamentals, focused on web standards, nested routing, progressive enhancement, and fast data loading. Now merged into React Router v7 but still widely used.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npx create-remix@latest
cd my-remix-app
npm run dev
```

Loader + Action pattern:
```tsx
// app/routes/posts.$id.tsx
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

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

export default function Post() {
  const { post } = useLoaderData<typeof loader>();
  return <article>{post.title}</article>;
}
```

## Intro

Remix is a full-stack React framework built on Web Fundamentals. Created by React Router authors (Michael Jackson, Ryan Florence), acquired by Shopify in 2022. Focus on progressive enhancement, nested routing, and data loading via `loader`/`action` server functions. Note: Remix v3 has merged back into React Router v7.

- **Repo**: https://github.com/remix-run/remix
- **Stars**: 32K+
- **Language**: TypeScript
- **License**: MIT

## What Remix Does

- **Nested routing** — file-based with nested layouts
- **Server loaders** — data fetched on server before render
- **Actions** — form POST handlers (works without JS)
- **Forms** — `<Form>` component with native HTML semantics
- **Error boundaries** — per-route error handling
- **Optimistic UI** — via `useFetcher`
- **Edge deploy** — Vercel, Cloudflare, Deno, Node

## Architecture

File-system routing in `app/routes/`. Each route exports `loader` (server data), `action` (mutations), and default component (UI). Remix streams server responses and hydrates progressively. No client-side data fetching needed for initial render.

## Self-Hosting

```bash
npm run build
npm start

# Docker
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
CMD ["npm", "start"]
```

## Key Features

- Native Web Fetch API (Request/Response)
- Nested routes with layouts
- Server loaders & actions
- Progressive enhancement (forms work without JS)
- Streaming SSR with Suspense
- Multi-adapter deploy (Node/Deno/Cloudflare/Vercel)
- Automatic JS bundling per route

## Comparison

| Framework | Routing | Data Fetching | SSR |
|---|---|---|---|
| Remix | Nested file-based | loader/action | Streaming |
| Next.js | App Router / Pages | Server Components / getSSP | Streaming |
| SvelteKit | File-based | load function | Streaming |
| Nuxt | File-based | useFetch | Streaming |

## FAQ

**Q: Remix or Next.js — which should I choose?**
A: Pick Remix if you want to stick close to web standards (Request/Response, Form); pick Next for the ecosystem and RSC. After 2024, Remix v3 has been merged into React Router v7.

**Q: Does it support static generation?**
A: It's primarily SSR, but you can use a prerender plugin for SSG.

**Q: Can it work without JS?**
A: Yes. Form + loader/action natively support a no-JS fallback.

## Sources & Credits

- Docs: https://remix.run
- GitHub: https://github.com/remix-run/remix
- License: MIT

---
Source: https://tokrepo.com/en/workflows/remix-full-stack-web-framework-web-fundamentals-26727437
Author: Script Depot