部署 Remix 应用
全栈 Web 框架，支持嵌套路由和服务端数据加载，部署到 Vercel、Fly.io 或 Node。
平台进阶
为什么
Remix 利用 Web 标准（Request/Response、表单）和嵌套路由在路由级并行加载数据。服务端优先方法提供优秀 SEO 和渐进增强，无需客户端 JS。
平台即服务采用率 2024 年增长 24%，团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research)，PaaS 层捕获了大多数新工作负载。
何时使用
需要 SSR、表单处理和嵌套布局的全栈应用用 Remix。Web 标准 API 和渐进增强重要时优于 Next.js。
如何做
1. 构建 — npm run build 生成 build/ + public/build/
2. Vercel — @remix-run/vercel 预设，git push 自动部署
3. Fly.io — remix.init 模板含 Dockerfile + fly.toml
4. Node — @remix-run/serve，运行：remix start
5. Cloudflare — @remix-run/cloudflare，运行于 Workers/Pages
6. 数据加载 — loader 函数服务端运行，流式传到客户端
7. Actions — 表单提交经 action 函数服务端处理
示例
// vite.config.ts — Vercel 预设
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [remix({ future: { v3_fetcherPersist: true } })],
});
// app/routes/posts.$id.tsx — loader + action
import { json } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";
export async function loader({ params }) {
const post = await getPost(params.id);
return json({ post });
}
export async function action({ request }) {
const formData = await request.formData();
await updatePost(Object.fromEntries(formData));
return json({ ok: true });
}
export default function Post() {
const { post } = useLoaderData<typeof loader>();
return <article><h1>{post.title}</h1><Form method="post">...</Form></article>;
}
// Fly.io 部署 — npx remix init fly && fly deploy
常见问题
- ⚠Loader 在客户端运行 — 忘记从路由模块导出，路由内仅服务端运行
- ⚠表单提交整页刷新 — 未用 @remix-run/react 的 <Form> 组件
- ⚠Session cookie 过大 — session 存太多，改用服务端 session 存储
最佳实践
- ✓用嵌套路由并行 loader — Remix 一次请求加载父 + 子数据
- ✓变更优先用 <Form> 而非 fetch — 渐进增强，无 JS 也能工作
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求