Remix 3.0 深度拆解：当全栈框架决定「抛弃 React」——从函数式虚拟 DOM 到命令式 Web 原生，一个 14 年来最激进的框架重写如何用 Fetch API 和 Preact 重新定义前端的终极形态

引言：一次蓄谋已久的「叛变」

2026 年 7 月 28 日，Remix 联合创始人 Michael Jackson 在博客上发布了一篇题为《Wake Up, Remix》的文章，宣布 Remix 3.0 beta 正式发布。这不是一次常规的大版本升级——这是一次从底层彻底重建的框架重写，Remix 选择了一条所有主流前端框架都没走过的路：抛弃 React，拥抱 Web 标准原生能力。

消息一出，前端社区炸了锅。有人欢呼这是"Next.js 本该成为的 Grug Brain 版本"，有人质疑这是否意味着 Remix 已经"完全无法辨认"，更有人在 Hacker News 上追问："Remix 3 相比 React Router 加 Vite 到底有什么价值？"

但如果你仔细审视 Remix 3 的架构设计，你会发现这并不是一次心血来潮的决定。从 2021 年 Remix 1.0 发布至今，React Router 团队一直在探索一个核心问题：Web 框架到底应该绑定到某个 UI 库，还是应该回归 Web 平台本身？ Remix 3 就是这个问题的终极回答。

本文将从架构设计、技术实现、生态影响三个维度，深度拆解 Remix 3.0 的每一个关键决策。

一、从「中心栈」到「全栈」：Remix 的重新定位

1.1 Remix 1/2 的定位：只管路由和渲染

在 Remix 1.x 和 2.x 中，框架的定位是"center stack"（中心栈）——它只负责路由匹配、数据加载和页面渲染，至于数据库 ORM、身份认证、部署方案、UI 组件库，全部由开发者自行选择和集成。

// Remix 2 的典型项目结构
app/
├── routes/
│   ├── _index.tsx          // 路由页面
│   ├── posts.$id.tsx       // 动态路由
│   └── api.webhook.tsx     // API 路由
├── models/
│   └── post.server.ts      // 数据模型（开发者自己选 Prisma/Drizzle）
├── services/
│   └── auth.server.ts      // 认证（开发者自己选 NextAuth/Clerk）
└── root.tsx                // 根布局

这种设计的优点是灵活性高，缺点是每个项目都要重新搭建基础设施。一个新项目从零开始，光是配置 ORM、认证、部署就要花好几天。

1.2 Remix 3 的野心：一个包搞定一切

Remix 3 彻底改变了这个定位。它不再只是一个"路由+渲染"的中心栈，而是一个完整的全栈体系。Michael Jackson 在发布文章中明确写道：

Remix 3 将路由、请求处理器、中间件、会话、身份认证、表单、上传、资源、数据和数据库管理、UI 组件、主题、网络以及测试等能力，都纳入统一的 remix 体系之下。

// Remix 3 的全新项目结构
my-remix-app/
├── app/
│   ├── routes/
│   │   ├── _index.tsx          // 路由（基于 Fetch API）
│   │   ├── posts.$id.tsx       // 动态路由
│   │   └── api.webhook.tsx     // API 路由
│   ├── db/
│   │   └── schema.ts           // 内置数据库 schema
│   ├── auth/
│   │   └── session.ts          // 内置会话管理
│   ├── ui/
│   │   ├── Button.tsx          // 内置 UI 组件
│   │   └── Theme.tsx           // 内置主题系统
│   └── root.tsx
├── remix.config.ts             // 单一配置文件
└── package.json                // 只有一个 remix 依赖

关键变化：从 npm install 的一长串依赖，变成了一个 remix 包。数据库、认证、UI、主题、测试——全部由 Remix 官方维护和集成。

二、架构革命：Fetch API 路由 + 命令式模型

2.1 路由从 React Router 变成 Fetch API

这是 Remix 3 最激进的架构变化之一。在 Remix 2 中，路由是 React 组件，通过 React Router 的 <Route> 声明。在 Remix 3 中，路由变成了 Fetch API 的请求处理器，控制器返回标准的 Web Response 对象。

// Remix 2：React 组件式路由
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

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

export default function PostPage() {
  const { post } = useLoaderData();
  return <article>{post.title}</article>;
}

// Remix 3：Fetch API 路由
export async function handleRequest(request: Request): Promise<Response> {
  const url = new URL(request.url);
  const id = url.pathname.split("/").pop();
  
  const post = await db.post.findUnique({ where: { id } });
  
  return new Response(renderPost(post), {
    headers: { "Content-Type": "text/html" }
  });
}

这个变化的意义深远：

1. 请求生命周期由服务器管理：不再需要 useLoaderData、useActionData 这些 React hooks，数据流从服务器到客户端是线性的
2. 标准 Web API：Request、Response、Headers、URL——全部是 Web 平台原生 API，没有任何框架抽象
3. 可测试性大幅提升：你可以直接用 fetch() 测试路由处理器，不需要启动整个 React 渲染管线

2.2 表单提交到 URL

Remix 2 的表单提交通过 React 的 <Form> 组件和 action 属性实现，底层依赖 React 的状态管理。Remix 3 则回归了 HTML 的原始设计——表单直接提交到 URL，由服务器处理请求。

<!-- Remix 2 -->
<Form method="post" action="/posts">
  <input name="title" />
  <button type="submit">创建</button>
</Form>

<!-- Remix 3：回归 HTML 原始设计 -->
<form method="post" action="/posts">
  <input name="title" />
  <button type="submit">创建</button>
</form>

看似简单，但这意味着 Remix 3 不再需要 React 的虚拟 DOM diffing 来处理表单状态。服务器收到 POST 请求，处理完毕，返回新的 HTML——这就是 HTTP 最原始的工作方式。

2.3 命令式模型：this.update() 替代 useState

Remix 3 保留了 JSX 语法，但移除了 React 运行时，转而采用一个基于 Preact 的分支版本。最关键的变化是编程模型从函数式响应式变成了命令式。

// React/Remix 2：函数式响应式
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

// Remix 3：命令式模型
class Counter {
  count = 0;
  
  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button on:click={this.increment}>
          +1
        </button>
      </div>
    );
  }
  
  increment() {
    this.count++;
    this.update();  // 显式通知框架：状态变了，重新渲染
  }
}

这个设计选择背后有几个深层考量：

1. 状态就是普通变量：不需要 useState、useReducer 这些抽象，this.count 就是一个变量
2. 变更通知是显式的：this.update() 明确告诉框架"我变了"，而不是靠 React 的脏检查机制
3. 更接近传统 OOP：对于从 Java/C# 转来的开发者，这种模式更直觉

2.4 统一事件系统：on 属性

Remix 3 引入了统一的事件系统，所有事件都通过 on: 前缀绑定：

// React：onClick, onChange, onSubmit...
<button onClick={handleClick}>Click</button>
<input onChange={handleChange} />
<form onSubmit={handleSubmit}>

// Remix 3：统一 on: 前缀
<button on:click={handleClick}>Click</button>
<input on:change={handleChange} />
<form on:submit={handleSubmit}>

这个变化看似微小，但它消除了 React 事件系统中大量的特殊情况（className vs class、htmlFor vs for、事件命名不一致等）。

三、Frames：服务器驱动 UI 的新范式

3.1 什么是 Frames？

Remix 3 引入了一个全新的概念——Frames。Frames 是带有 src 属性的服务器渲染片段，可以独立加载和重新加载，类似于 HTMX 的 hx-get / hx-trigger 模式。

// Remix 3 的 Frames
function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      
      {/* 服务器渲染片段，可独立刷新 */}
      <frame src="/api/stats" refresh="30s">
        <div class="skeleton">加载中...</div>
      </frame>
      
      <frame src="/api/recent-orders" refresh="on:user-action">
        <div class="skeleton">加载中...</div>
      </frame>
    </div>
  );
}

// 服务器端：/api/stats
export async function handleRequest(request: Request): Promise<Response> {
  const stats = await getStats();
  return new Response(
    `<div class="stats">
       <span>今日订单: ${stats.orders}</span>
       <span>总收入: ¥${stats.revenue}</span>
     </div>`,
    { headers: { "Content-Type": "text/html" } }
  );
}

3.2 Frames vs React Server Components

Remix 3 的 Frames 和 React 的 Server Components 看似相似，但有本质区别：

关键区别：Frames 传输的是标准 HTML，不是 RSC Payload。这意味着：

• 浏览器可以直接解析和渲染，不需要 React 运行时参与
• 搜索引擎可以直接索引，不需要等待 hydration
• 网络故障时可以优雅降级（返回 skeleton 状态）

3.3 Frames 的实现原理

Frames 的底层实现基于 Web 平台的标准能力：

// Frames 的内部实现（简化版）
class FrameElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    const src = this.getAttribute('src');
    const refresh = this.getAttribute('refresh');
    
    // 初始加载
    this.loadContent(src);
    
    // 定时刷新
    if (refresh?.endsWith('s')) {
      const interval = parseInt(refresh) * 1000;
      setInterval(() => this.loadContent(src), interval);
    }
  }
  
  async loadContent(src: string) {
    try {
      const response = await fetch(src);
      const html = await response.text();
      this.shadowRoot.innerHTML = html;
    } catch (error) {
      // 保持当前状态，不破坏用户体验
      console.error('Frame load failed:', error);
    }
  }
}

customElements.define('frame', FrameElement);

注意：这里的 fetch() 是标准的浏览器 API，不是框架封装的。这意味着即使 JavaScript 加载失败，浏览器的原生 <iframe> 行为仍然可以作为降级方案。

四、Unbundling：运行时取代打包器

4.1 打包器时代的终结？

Remix 3 提出了一个激进的理念——Unbundling（取消打包）。在传统前端开发中，打包器（Webpack/Vite/ESBuild）是构建流程的核心，它负责：

• 模块解析和依赖分析
• 代码分割和懒加载
• 资源优化（压缩、哈希、CDN 路径）
• Tree Shaking

Remix 3 的回答是：运行时而不是打包器成为事实来源。

// 传统打包器模式
// webpack.config.js
module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: { chunks: 'all' },
  },
};

// Remix 3：运行时模式
// remix.config.ts
export default {
  // 不需要配置打包器
  // Remix 编译并提供资源
  // import 语句不再拥有特殊语义
};

4.2 import 语句的语义变化

在传统打包器中，import 语句有特殊语义——它触发模块解析、依赖分析、代码分割。在 Remix 3 中，import 语句回归了 ES Module 的原始语义——它只是声明模块依赖关系，不触发任何构建时行为。

// 传统模式：import 触发打包器行为
import { Button } from './ui/Button';  // 打包器会分析这个模块的依赖
import styles from './styles.css';      // 打包器会处理 CSS Modules

// Remix 3：import 只是模块声明
import { Button } from './ui/Button';  // 运行时按需加载
import styles from './styles.css';      // 运行时注入样式

4.3 资源由 Remix 编译并提供服务

Remix 3 的另一个关键变化是：框架本身负责资源的编译和提供。开发者不再需要配置 CDN 路径、资源哈希、缓存策略——Remix 全部搞定。

// 传统模式：开发者手动管理资源
// public/manifest.json
{
  "bundle.js": "bundle.a1b2c3d4.js",
  "styles.css": "styles.e5f6g7h8.css"
}

// Remix 3：框架自动管理
// 开发者只需要在组件中使用
import styles from './component.css';
// Remix 自动处理：编译、哈希、CDN 路径、缓存头

五、生态剧变：社区的分裂与重组

5.1 赞赏派：这是 Web 的回归

Alex Kotliarskyi（前 Google 工程师）在博客中写道：

Remix 3 是"Next.js 本该成为的 Grug Brain 版本"。它标志着从函数式编程向命令式编程的钟摆正在摆回。这不是倒退，这是进步。

他的核心观点是：React 的函数式模型（hooks、虚拟 DOM、声明式渲染）在大型项目中带来了太多心智负担。Remix 3 的命令式模型更直觉、更可预测、更容易调试。

Kent C. Dodds（React Testing Library 作者）则强调了 Remix 3 对 TypeScript 的创新使用：

// Remix 3 的 TypeScript 技巧：像参数一样对 this 进行类型定义
class TodoList {
  items: string[] = [];
  
  // TypeScript 通过 this 参数推断类型
  addItem(this: TodoList, item: string) {
    this.items.push(item);
    this.update();
  }
  
  // this 的类型在不同上下文中自动推断
  render() {
    return this.items.map(item => <li>{item}</li>);
  }
}

5.2 质疑派：生态成本太高

Reddit 上 r/reactjs 的一篇热门帖子认为 Remix 已经"完全无法辨认"：

你爱怎么喷 Next.js 都行，它的大版本升级确实经常搞事情，也经常让旧代码崩掉。但至少它一直还是那个做 SSR 的框架。Remix 现在倒好，已经彻底变成另一个东西了，完全看不出以前那个 Remix 的影子……

Hacker News 上的讨论更加尖锐：

1. 迁移成本：现有的 Remix 2 应用无法直接升级到 Remix 3，官方建议迁移到 React Router v7 作为过渡
2. 生态断层：基于 React 的组件库（MUI、Ant Design、Chakra UI）全部无法使用
3. 人才市场：React 开发者需要重新学习命令式模型和 Preact

5.3 迁移路径：两条路

Remix 3 给出了两条明确的迁移路径：

Remix 2 应用
    │
    ├── 路径 A：渐进迁移
    │   └── Remix 2 → React Router v7 → 继续使用 React
    │
    └── 路径 B：完全重写
        └── Remix 2 → Remix 3（全新项目，不兼容）

官方的建议很明确：如果你的 Remix 2 项目运行良好，迁移到 React Router v7；如果你想要 Web 标准原生体验，从零开始一个 Remix 3 项目。

六、代码实战：Remix 3 的完整应用

6.1 创建项目

npx remix@next new my-remix-app
cd my-remix-app
npm install
npm run dev

6.2 路由：Fetch API 风格

// app/routes/posts.tsx
import { db } from "~/db";

// 处理 GET 请求
export async function handleRequest(request: Request): Promise<Response> {
  const url = new URL(request.url);
  
  // 列表页
  if (url.pathname === "/posts") {
    const posts = await db.post.findMany({
      orderBy: { createdAt: "desc" }
    });
    
    return new Response(renderPostList(posts), {
      headers: { "Content-Type": "text/html" }
    });
  }
  
  // 详情页
  const id = url.pathname.split("/").pop();
  const post = await db.post.findUnique({ where: { id } });
  
  if (!post) {
    return new Response("Not Found", { status: 404 });
  }
  
  return new Response(renderPost(post), {
    headers: { "Content-Type": "text/html" }
  });
}

// 处理 POST 请求（创建文章）
export async function handlePost(request: Request): Promise<Response> {
  const formData = await request.formData();
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;
  
  const post = await db.post.create({
    data: { title, content }
  });
  
  // 302 重定向到新文章
  return new Response(null, {
    status: 302,
    headers: { Location: `/posts/${post.id}` }
  });
}

6.3 组件：命令式模型

// app/ui/TodoApp.tsx
class TodoApp {
  todos: { id: string; text: string; done: boolean }[] = [];
  inputValue = "";
  
  async connectedCallback() {
    // 组件挂载时从服务器加载数据
    const response = await fetch("/api/todos");
    this.todos = await response.json();
    this.update();
  }
  
  render() {
    return (
      <div class="todo-app">
        <form on:submit={this.addTodo}>
          <input 
            type="text"
            value={this.inputValue}
            on:input={this.onInput}
            placeholder="添加待办..."
          />
          <button type="submit">添加</button>
        </form>
        
        <ul>
          {this.todos.map(todo => (
            <li class={todo.done ? "done" : ""}>
              <span on:click={() => this.toggleTodo(todo.id)}>
                {todo.text}
              </span>
              <button on:click={() => this.deleteTodo(todo.id)}>
                删除
              </button>
            </li>
          ))}
        </ul>
        
        <p>共 {this.todos.length} 项，已完成 {this.todos.filter(t => t.done).length} 项</p>
      </div>
    );
  }
  
  onInput(e: Event) {
    this.inputValue = (e.target as HTMLInputElement).value;
    // 不需要 update()，因为还没提交
  }
  
  async addTodo(e: Event) {
    e.preventDefault();
    
    if (!this.inputValue.trim()) return;
    
    const response = await fetch("/api/todos", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: this.inputValue })
    });
    
    const newTodo = await response.json();
    this.todos.push(newTodo);
    this.inputValue = "";
    this.update();  // 显式更新 UI
  }
  
  async toggleTodo(id: string) {
    const todo = this.todos.find(t => t.id === id);
    if (!todo) return;
    
    await fetch(`/api/todos/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ done: !todo.done })
    });
    
    todo.done = !todo.done;
    this.update();
  }
  
  async deleteTodo(id: string) {
    await fetch(`/api/todos/${id}`, { method: "DELETE" });
    this.todos = this.todos.filter(t => t.id !== id);
    this.update();
  }
}

customElements.define("todo-app", TodoApp);

6.4 Frames：服务器驱动 UI

// app/routes/dashboard.tsx
function Dashboard() {
  return (
    <div class="dashboard">
      <h1>仪表盘</h1>
      
      {/* 实时统计，每 30 秒自动刷新 */}
      <frame src="/api/stats" refresh="30s">
        <div class="skeleton">
          <div class="skeleton-line"></div>
          <div class="skeleton-line short"></div>
        </div>
      </frame>
      
      {/* 最近订单，用户操作后刷新 */}
      <frame src="/api/orders/recent" refresh="on:order-created">
        <div class="skeleton">加载中...</div>
      </frame>
      
      {/* 系统通知，手动刷新 */}
      <frame src="/api/notifications" refresh="manual">
        <div class="skeleton">加载中...</div>
      </frame>
    </div>
  );
}

// app/routes/api.stats.tsx
export async function handleRequest(request: Request): Promise<Response> {
  const stats = await getDashboardStats();
  
  return new Response(`
    <div class="stats-grid">
      <div class="stat-card">
        <span class="stat-value">${stats.todayOrders}</span>
        <span class="stat-label">今日订单</span>
      </div>
      <div class="stat-card">
        <span class="stat-value">¥${stats.todayRevenue.toLocaleString()}</span>
        <span class="stat-label">今日收入</span>
      </div>
      <div class="stat-card">
        <span class="stat-value">${stats.activeUsers}</span>
        <span class="stat-label">活跃用户</span>
      </div>
      <div class="stat-card">
        <span class="stat-value">${stats.conversionRate}%</span>
        <span class="stat-label">转化率</span>
      </div>
    </div>
  `, {
    headers: { "Content-Type": "text/html" }
  });
}

6.5 中间件：请求拦截

// app/middleware.ts
export async function middleware(request: Request): Promise<Response | void> {
  const url = new URL(request.url);
  
  // 认证检查
  if (url.pathname.startsWith("/dashboard")) {
    const session = await getSession(request);
    if (!session.user) {
      return new Response(null, {
        status: 302,
        headers: { Location: "/login" }
      });
    }
  }
  
  // 请求日志
  console.log(`${request.method} ${url.pathname} - ${Date.now()}`);
  
  // 继续处理请求（返回 void 表示放行）
}

七、性能分析：为什么选择 Web 标准

7.1 启动时间对比

Remix 3 的关键优势：没有 Hydration 开销。因为 Frames 传输的是标准 HTML，浏览器直接解析和渲染，不需要等待 JavaScript 加载和执行后再"激活"交互。

7.2 包体积对比

Remix 2 项目：
  react.production.min.js      12.8 KB (gzip)
  react-dom.production.min.js  42.3 KB (gzip)
  @remix-run/react             15.2 KB (gzip)
  业务代码                     ~50 KB (gzip)
  总计                         ~120 KB (gzip)

Remix 3 项目：
  preact.min.js                 3.8 KB (gzip)
  @remix-run/preact             5.2 KB (gzip)
  业务代码                     ~30 KB (gzip)
  总计                         ~39 KB (gzip)

包体积减少了约 67%，这对移动端用户体验的影响是显著的。

7.3 内存占用

// React 的虚拟 DOM 内存模型
// 每个组件实例都维护一个虚拟 DOM 树
// 大型列表：1000 个项 ≈ 50MB 内存

// Remix 3 的命令式模型
// 没有虚拟 DOM，状态就是普通变量
// 大型列表：1000 个项 ≈ 5MB 内存

八、与竞品的深度对比

8.1 Remix 3 vs Next.js 15

8.2 Remix 3 vs SvelteKit

8.3 Remix 3 vs SolidStart

九、AI 辅助编程的天然优势

Remix 3 的一个被低估的优势是：它天然适合 AI 辅助编程。

Zenn 上的一篇实践评测指出：

单一软件包、接近 Web 标准、显式优于约定的设计非常适合 AI 辅助编程。

原因是：

1. 标准 Web API：AI 模型对 fetch()、Request、Response 这些标准 API 的理解远比对 React hooks 的理解深入
2. 命令式模型：this.update() 的显式调用比 React 的隐式重渲染更容易被 AI 生成和调试
3. 单一依赖：AI 不需要理解复杂的依赖图（react、react-dom、@remix-run/react、@remix-run/node...），只需要理解 remix
4. 类型安全：TypeScript 的 this 参数技巧让 AI 可以更准确地推断类型

// AI 生成这段代码的准确率远高于 React hooks
class UserList {
  users: User[] = [];
  
  async loadUsers() {
    const response = await fetch("/api/users");
    this.users = await response.json();
    this.update();
  }
  
  render() {
    return this.users.map(user => (
      <div class="user-card">
        <img src={user.avatar} alt={user.name} />
        <span>{user.name}</span>
      </div>
    ));
  }
}

// AI 生成 React hooks 版本时经常出错
function UserList() {
  const [users, setUsers] = useState<User[]>([]);  // AI 可能忘记泛型
  
  useEffect(() => {  // AI 可能忘记依赖数组
    fetch("/api/users")
      .then(res => res.json())
      .then(setUsers);  // AI 可能搞混 setter
  }, []);  // AI 可能忘记空依赖数组
  
  return users.map(user => (  // AI 可能忘记 key
    <div>
      <img src={user.avatar} />
      <span>{user.name}</span>
    </div>
  ));
}

十、总结与展望

10.1 Remix 3 的历史意义

Remix 3 不仅仅是一个框架的重写，它代表了前端开发的一次范式转移：

1. 从 React 中心到 Web 标准中心：框架不再绑定到某个 UI 库
2. 从函数式到命令式：编程模型回归更直觉的方式
3. 从打包器到运行时：构建流程被简化到极致
4. 从客户端渲染到服务器驱动：Frames 重新定义了前后端交互

10.2 对开发者的建议

现在就尝试 Remix 3 的场景：

• 全新项目，对框架选型没有历史包袱
• 对 React 生态没有强依赖
• 追求极致性能和包体积
• 有 AI 辅助编程的需求

暂时不要用 Remix 3 的场景：

• 已有 Remix 2 项目，迁移成本太高
• 依赖 React 组件库（MUI、Ant Design 等）
• 团队对 React 有深度经验
• 需要生产就绪的框架

10.3 未来展望

Remix 3 目前还是 beta 版本，团队表示未来将每周持续发布新版本。有几个方向值得关注：

1. 组件库生态：Remix 3 需要建立自己的 UI 组件库生态，这是当前最大的短板
2. 部署适配：目前主要支持 Cloudflare Workers 和 Deno Deploy，需要扩展到更多平台
3. 开发者工具：调试工具、性能分析工具、IDE 插件都需要重新开发
4. 社区建设：从 React 生态迁移过来的开发者需要新的学习资源和社区支持

Remix 3 是一次豪赌。如果成功，它将重新定义前端框架的设计哲学；如果失败，它将成为"过于激进"的典型案例。但无论如何，它都值得每个前端开发者关注——因为它提出的问题（框架应该绑定到 UI 库还是 Web 标准？）是整个行业都需要回答的。

参考资源：

• Remix 3 官方博客：https://remix.run/blog
• InfoQ 深度报道：https://www.infoq.com/news/2026/07/remix-3-beta-preview/
• GitHub 仓库：https://github.com/remix-run/remix
• 《Wake Up, Remix》原文：https://remix.run/blog/wake-up-remix