欢迎使用 Remix
export async function loader({ request }) {
return getProjects();
}
export async function action({ request }) {
const form = await request.formData();
return createProject({
title: form.get("title"),
});
}
export default function Projects() {
const projects = useLoaderData();
const { state } = useNavigation();
const busy = state === "submitting";
return (
<div>
{projects.map((project) => (
<Link to={project.slug}>
{project.title}
</Link>
))}
<Form method="post">
<input name="title" />
<button type="submit" disabled={busy}>
{busy
? "Creating..."
: "Create New Project"}
</button>
</Form>
</div>
);
}
用户评价
我一直都在等待一些东西能够在 React 领域促进渐进增强，而 Remix 确实做到了更多。它证明了我们不需要牺牲 React 或选择 SSG 就能获得闪电般的速度、可访问的 UI，并且开发体验让这一切变得轻而易举🤤
天哪，Remix 太棒了！
我刚刚用 Cloudflare Workers 和 Supabase 重写了我的第一个 Remix 应用，它太棒了。
Remix 仍然让我感到震惊！如此简单和优雅😩。我喜欢它也专注于可访问性（渐进增强...）🤯。几天前我还觉得 Remix 怎么样，我们有 Next.js 和 Svelte 😴 ...现在我却像疯了一样兴奋😂。这真是太棒了🤤
Remix 加载器真正酷的地方在于，你可以在那里完成大部分数据转换和计算，比如检查列表是否为空、限制记录数量、仅发送特定属性，这样你的 React 组件就只需要接收数据并渲染，无需任何逻辑。
Remix 将帮助开发者快速构建可访问、可扩展且高性能的应用，这些应用拥有出色的用户体验和令人惊叹的开发者体验。这不仅对开发者来说是一个胜利，对最终用户来说也是一个巨大的胜利！
在我看来，@remix_run 将会改变那些犹豫是否采用全栈 JavaScript 的企业团队的游戏规则。其核心概念非常直观，你可以在一天内掌握，它甚至可以集成到你的现有技术栈中。
我非常喜欢@mjackson 和 @ryanflorence 在 Remix 上所做的工作！在不到 30 秒的时间内部署到 AWS Lambda 🤯
到目前为止，使用 @remix_run 的体验非常棒。多年来我一直使用 Next.js 构建应用，嵌套布局是一个非常棒的功能。我多年来也从未学到过这么多关于 Web 的知识。
我非常喜欢使用 @remix_run 来构建我的网站。Remix 通过让我能够在前端和后端代码之间无缝切换，提高了我的前端开发效率。
如果你正在进行 #webdevelopment，你应该看看 Remix 🔥 它是一种用于 Web 开发的新（旧）范式，它简化了我们的代码，尤其是状态管理😅，加快了页面加载速度，并为我们提供了一个可以依赖的心智模型和框架，帮助我们创造出最好的作品。
当你还在 等待 静态网站构建时， 分布式 Web 基础设施变得越来越强大。 突破静态的局限。
Remix 是一款无缝的服务器和浏览器运行时，通过利用分布式系统和原生浏览器功能，而不是笨重的静态构建，来提供快速的页面加载和即时过渡。它基于 Web Fetch API（而不是 Node）构建，可以在任何地方运行。它已经在 Cloudflare Workers 上原生运行，并且当然也支持无服务器和传统的 Node.js 环境，所以你可以按自己的方式使用它。
然而，页面速度只是我们真正目标的一个方面。我们追求的是 更好的用户体验。随着你不断突破 Web 的界限，你的工具却跟不上你的需求。 Remix 已准备就绪，可以为你服务，从最初的请求到你的设计师能够想到的最花哨的用户体验。快来体验一下 👀
Remix 有一个秘诀
嵌套路由。
网站通常具有控制子视图的多个导航层级。
这些组件不仅几乎总是与 URL 片段耦合...
...它们也是数据加载和代码分割的语义边界。
加载状态呢？
大多数 Web 应用在组件内部获取数据，从而创建 请求瀑布，导致加载速度变慢和 卡顿。
Remix 在服务器端并行加载数据，并发送一个完整格式的 HTML 文档。 速度更快，无卡顿。
预取一切
Remix 可以在用户点击链接之前并行预取所有内容。
公共数据。用户数据。模块。甚至 CSS。
零加载状态。零骨架 UI。零卡顿。
好吧，你抓到我们了，它们只是预取链接标签，#useThePlatform
数据加载
你有没有注意到你的应用中大部分代码都是用于 更改数据？
想象一下，如果 React 只有 props 而没有设置状态的方法。有什么意义？如果 Web 框架可以帮助你加载数据，但不能帮助你更新它，那又有什么意义呢？Remix 不会把你抛在 <form onSubmit>悬崖边上。 （event.preventDefault到底有什么作用？）
它非常简单，几乎有点愚蠢。只需创建一个表单...
...并在路由模块上添加一个操作。它看起来像传统的 HTML 表单，但能够提供你想要的完全动态的 Web 体验。
Remix 在服务器端运行操作，在客户端重新验证数据，甚至处理重新提交导致的竞争条件。
使用过渡钩子并创建一些加载 UI。Remix 处理所有状态，你只需请求它。
或者使用一些乐观 UI。Remix 提供发送到服务器的数据，因此你也可以跳过突变时的繁忙加载动画。
用于突变的 HTML 表单。谁会想到呢？
export default function NewInvoice() {
return (
<Form method="post">
<input type="text" name="company" />
<input type="text" name="amount" />
<button type="submit">Create</button>
</Form>
);
}
export async function action({ request }) {
const body = await request.formData();
const invoice = await createInvoice(body);
return redirect(`/invoices/${invoice.id}`);
}
错误处理
路由错误边界 让正常流程保持畅通。
每个路由模块都可以导出一个错误边界，与默认路由组件并排。
如果抛出错误（客户端或服务器端），用户会看到边界而不是默认组件。
没有问题的路由会正常渲染，因此用户拥有比强制刷新更多的选择。
如果路由没有边界，错误会向上冒泡。只需在顶部放置一个，并在代码审查中放松对错误的担心，好吗？
