欢迎来到 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 确实远不止于此。它证明了我们不需要为了闪电般快速、可访问的 UI 而牺牲 React 或选择 SSG，而且 DX 也让一切变得太容易了 🤤
天呐 💩 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 通过让我能够在前端和后端代码之间无缝切换，提高了作为前端开发人员的效率。
如果你正在进行 #web开发，你应该看看 Remix 🔥 它是 Web 开发的一种新的（旧的）范式，它简化了我们的代码，特别是状态管理😅，加快了我们的页面加载速度，并为我们提供了一个可以依靠的心理模型和框架来创作我们最好的作品
当你在 等待你的静态网站构建时， 分布式网络 基础设施变得非常好了。 突破静态。
Remix 是一个无缝的服务器和浏览器运行时，它通过利用分布式系统和原生浏览器功能而不是笨重的静态构建来提供快速的页面加载和即时过渡。它基于 Web Fetch API（而不是 Node）构建，可以在任何地方运行。它已经可以在 Cloudflare Workers 上原生运行，并且当然支持无服务器和传统的 Node.js 环境，因此你可以按你现有的方式使用它。
页面速度只是我们真正目标的一个方面。我们追求的是 更好的用户体验。随着你不断突破 Web 的边界，你的工具并没有跟上你的需求。 Remix 已经准备好从初始请求到你的设计师能想到的最炫酷的 UX 为你服务。看看吧 👀
Remix 有一个作弊码
嵌套路由。
网站通常具有控制子视图的导航级别。
这些组件不仅几乎总是与 URL 段耦合...
...它们也是数据加载和代码拆分的分界线。
加载状态怎么样？
大多数 Web 应用在组件内部进行数据获取，从而产生 请求瀑布、加载缓慢和 卡顿。
Remix 在服务器上并行加载数据，并发送一个完全形成的 HTML 文档。 更快，无卡顿。
预取一切
Remix 可以在用户点击链接之前并行预取所有内容。
公共数据。用户数据。模块。甚至 CSS。
零加载状态。零骨架 UI。零卡顿。
好吧，你抓到我们了，它们只是预取链接标签，#使用平台
数据加载
你有没有注意到你应用中的大多数代码都是用来 更改数据的？
想象一下，如果 React 只有 props 而没有设置状态的方法。那有什么意义？如果一个 Web 框架可以帮助你加载数据，但不能帮助你更新数据，那有什么意义？Remix 不会在 <form onSubmit> 悬崖边把你丢下。 （event.preventDefault 到底有什么作用？）
它太简单了，有点傻。只需创建一个表单...
...以及路由模块上的一个 action。它看起来像传统的 HTML 表单，但可以实现你想要的完全动态的 Web 体验。
Remix 在服务器端运行 action，在客户端重新验证数据，甚至可以处理重新提交导致的竞争条件。
使用过渡钩子变得花哨，并创建一些待处理的 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}`);
}
错误处理
路由错误边界 保持快乐路径的快乐。
每个路由模块都可以在默认路由组件旁边导出一个错误边界。
如果抛出错误，无论是客户端还是服务器端，用户都会看到边界而不是默认组件。
没有问题的路由会正常渲染，因此用户有比强制刷新更多的选择。
如果路由没有边界，则错误会向上冒泡。只需在顶部放置一个，然后在代码审查中放松一下对错误的担忧，好吗？
