Remix v2 有一个免费框架，让 React Server-Side Rendering 真正变得愉快

Source: Dev.to

v2 中的变化

快速开始

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

带数据加载的嵌套路由

// app/routes/posts.$postId.tsx
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } 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.postId } });
  if (!post) throw new Response("Not Found", { status: 404 });
  return json({ post });
}

export default function Post() {
  const { post } = useLoaderData();
  return (
    <>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </>
  );
}

Actions（服务器端表单处理）

import { ActionFunctionArgs, redirect } from "@remix-run/node";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const title = formData.get("title") as string;
  await db.post.create({ data: { title } });
  return redirect("/posts");
}

export default function NewPost() {
  return (
    <>
      Create
    </>
  );
}

无需 useState、无需 onSubmit 处理函数，也不需要手动 fetch 调用——表单开箱即用，具备渐进增强特性。

错误边界

import { useRouteError, isRouteErrorResponse } from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return (
      <div>
        {error.status}: {error.data}
      </div>
    );
  }
  return <div>Something went wrong</div>;
}

单一边界即可处理每条路由的预期错误（如 404）和意外错误。

为什么选择 Remix 而非 Next.js

• 嵌套路由 → 并行数据加载，避免瀑布式请求。
• 表单无需 JavaScript → 完全的渐进增强。
• 直接使用标准 Web API（Request、Response、FormData）。
• 模型更简洁，比 React Server Components（RSC）更易理解。

结论

基于 Vite 的 Remix v2 速度快、使用简单，并且以 Web 标准为首。如果你想要在不引入 Next.js 复杂性的情况下使用 React SSR，这就是最佳选择。

需要自动化数据采集或构建自定义爬虫？ 查看我的 Apify actors 获取现成工具，或发送邮件至 spinov001@gmail.com 讨论定制方案。