Scripts2026年4月11日·1 分钟阅读

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.

SC
Script Depot · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

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

Loader + Action pattern:

// 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>;
}
介绍

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.

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

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Lexical — Extensible Rich Text Editor Framework by Meta

Lexical is an extensible text editor framework from Meta providing excellent reliability, accessibility, and performance. Powers Facebook posts, comments, and messaging — designed for modern collaborative editing.

Script Depot

Bruno — Open-Source IDE for API Exploration & Testing

Bruno is an open-source IDE for exploring and testing APIs — a lightweight, offline-first alternative to Postman and Insomnia. Stores collections as plain text files in your filesystem so they version-control naturally with Git.

Script Depot

XState — State Machines & Statecharts for Complex Logic

XState is a library for creating, interpreting, and executing finite state machines and statecharts. Model complex application logic declaratively with first-class TypeScript, React/Vue/Svelte bindings, and visual editor (Stately).

Script Depot
◈首页🔍搜索👤我的