Remix_基于 React 和 Node 的全栈框架

Web前端开发网

fly63.com

首页资源工具文章教程栏目

Remix

网站地址:https://remix.run/

GitHub:https://github.com/remix-run/remix

网站描述:基于 React 和 Node 的全栈框架

访问官网

GitHub

Remix 是一个由 react Router 开发团队所开发的基于 React 和 Node 的全栈框架，以解决开发者在用 React 开发时面临的一些棘手问题，如今 Remix 关闭付费订阅模式，正式开源。

众所周知，在使用 React 开发单页面时，最常见的问题就是如果在 React 中使用客户端渲染（CSR，client-side rendering），就很难有好的 seo。这是因为在 CSR 之下，你在页面上看到的数据是由浏览器本身的 JavaScript 生成的，在这样的网站上同样也很难有动态的元数据。也正是因为这些原因，单页面通常被视为「非 SEO」友好的网站。

为了解决这些问题，不少开发者会选择另一个非常流行的 React 框架 —— Next.js。Next.js 也正是 Remix 在该领域的最大竞争对手。但由于此前 Next.js 开源而 Remix 需要付费使用，Remix 在两者的竞争中略处于下风。

Remix 作为一个框架，其特点包括：

文件系统路由
路由布局嵌套
自动拆分代码
数据驱动的元标签
内置数据加载
零配置构建
React Refresh
……

代码示例：

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 } = useTransition();
  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>
  );
}