# 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 as a script file and run:

## 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 和 Next.js 选哪个？**
A: 追求 Web 标准（Request/Response、Form）选 Remix；生态和 RSC 选 Next。2024 后 Remix v3 已合并到 React Router v7。

**Q: 支持静态生成吗？**
A: 主要是 SSR，但可以用 prerender 插件做 SSG。

**Q: 可以不用 JS 工作吗？**
A: 可以。Form + loader/action 原生支持无 JS fallback。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/26727437-355f-11f1-9bc6-00163e2b0d79
Author: Script Depot