Full-Stack Web Framework

Remix 全栈框架

拥抱 Web 标准，渐进增强的全栈 React 框架

Shopify 出品的全栈框架，基于 Web 标准 API（Request / Response / FormData）， 嵌套路由与 Loader/Action 数据模式，无 JS 也能运行的渐进增强， React Router v7 合并带来统一生态。

Remix v2 React Router v7 Loader / Action 嵌套路由 渐进增强 Web 标准 Prisma ORM Cloudflare Workers
开始学习 → 查看目录

为什么选择 Remix

🌐

Web 标准优先

使用原生 Request、Response、FormData、URLSearchParams，不再发明新 API

🔗

嵌套路由

UI 与数据同步嵌套，每层路由独立 Loader，并行加载，错误不扩散

📋

Form 天然可用

HTML Form 直接 POST 到 Action，禁用 JS 仍可提交，渐进增强内建

⚡

边缘优先运行

适配器体系支持 Cloudflare Workers、Vercel Edge、Node.js，随处运行

🛡️

内建错误边界

每条路由有独立 ErrorBoundary，局部错误不崩溃整个页面

🚀

React Router 统一

Remix v2 与 React Router v7 完全合并，一套路由系统横跨 SPA 与 SSR

课程目录 · 10章

01
Remix 简介与核心概念
Remix vs Next.js、Shopify 历史、React Router v7 合并、安装与项目结构、Loader/Action 名词解释
›
02
文件系统路由
app/routes/ 约定、点分隔嵌套、布局路由、索引路由、Outlet、路径参数、路由元数据 meta
›
03
Loader 数据加载
loader 函数签名、useLoaderData、TypeScript 推断、并行请求、Cache-Control、博客实战
›
04
Action 数据变更
action 函数、Form 无 JS 提交、useActionData、redirect、乐观 UI、评论提交实战
›
05
嵌套路由与布局
UI+数据共同嵌套、Outlet context、并行数据加载、路由级错误边界、三级嵌套后台实战
›
06
Session 与认证
Cookie Session 存储、Flash Message、登录流程、受保护路由、remix-auth、OAuth2
›
07
数据库集成 Prisma
Prisma + SQLite/PostgreSQL、Loader/Action 中操作数据库、Serverless 连接池、CRUD 实战
›
08
文件上传与高级表单
multipart 文件上传、S3 上传、多步骤表单、zod+conform 验证、useFetcher 局部提交
›
09
性能与优化
prefetch="intent"、defer 流式加载、资源路由 API、HTTP 缓存、SPA 模式、Vite 构建
›
10
部署与生态
适配器体系、Docker 生产部署、Hydrogen 关系、Vitest 测试、状态管理、从 Next.js 迁移
›

学习目标

🌐

理解 Web 标准

掌握 Request/Response/FormData 等原生 Web API，在 Remix 中直接使用而无需学习框架专属抽象

🔗

嵌套路由精通

理解 Outlet 机制与嵌套 Loader 的并行加载原理，构建高性能的多级嵌套布局

📝

全栈数据流

熟练使用 Loader 读取数据、Action 变更数据，通过 Form 实现渐进增强的完整数据流

🔐

生产级认证

使用 Cookie Session 实现安全的用户认证，集成 remix-auth 支持 OAuth2 第三方登录

🗄️

数据库集成

配置 Prisma ORM，在 Loader/Action 中安全操作数据库，处理 Serverless 连接池问题

🚀

多平台部署

掌握 Remix 适配器机制，将应用部署到 Node.js、Cloudflare Workers 或 Vercel Edge

前置要求

需要掌握

  • JavaScript ES6+ 基础语法
  • React 基础（组件、Props、Hooks）
  • TypeScript 基础类型系统
  • Node.js 运行环境
  • 基础 HTTP / HTML Form 概念

开发环境

  • Node.js 20 LTS 或更高版本
  • VS Code + TypeScript 插件
  • npm / pnpm 包管理器
  • Git 版本控制工具
  • SQLite（入门）或 PostgreSQL