扫一扫分享
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>
);
}
手机预览