前端框架 Remix，不是以太坊的 Remix IDE
基于 React 和 TypeScript 的 SSR 服务器端渲染的全栈Web框架
https://remix.run

Remix 其实基于 esbuild 很多代码都跑在服务端
Remix和 Next.js都是 React服务端渲染的 全栈开发元框架 Meta-Framework

  • 元框架提供一种通用的结构和范式，选择Remix还是 Next.js, 其实更多的是对开发范式的选择；
  • 一套React服务端渲染的生产化就绪的元框架, 都有一套范式
  • Remix 的核心是一套编译系统和一套路由系统

image.png

Compiler：@remix-run/dev，基于 esbuild 和一堆插件实现了 dev 和 build;
Server：@remix-run/{adaptor}，就是 @remix-run/server-runtime 上包了一层，提供对各个平台的封装
Client：@remix-run/react，里面依赖了 react-router

Remix 的 Compiler 通过 esbuild 的 treeshake，
build client 时会把不需要的 server 代码 treeshake 掉，
build server 时会把不用的 client 代码 treeshake 掉

remix 特点

  1. 让开发者聚焦于UI以及 UI相关的数据处理逻辑. 剩下的交给Remix完成
  2. 追求速度、用户体验（UX），支持任何 SSR/SSG 等
  3. 基于 Web 基础技术，如 HTML/CSS 与 HTTP 以及 Web Fecth API，绝大部分情况可以不依赖于 JavaScript 运行，所以可以运行在任何环境下，如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
  4. 客户端与服务端一致的开发体验，客户端代码与服务端代码写在一个文件里，无缝进行数据交互，同时基于 TypeScript，类型定义可以跨客户端与服务端共用
  5. 内置文件即路由、动态路由、嵌套路由、资源路由等
  6. 去掉 Loading、骨架屏等任何加载状态，页面中所有资源都可以预加载（Prefetch），页面几乎可以立即加载
  7. 告别以往瀑布式（Waterfall）的数据获取方式，数据获取在服务端并行（Parallel）获取，生成完整 HTML 文档，类似 React 的并发特性
  8. 提供开发网页需要所有状态，开箱即用；提供所有需要使用的组件，包括 、、 、
    、 ，用于处理元信息、脚本、CSS、路由和表单相关的内容
  9. 内置错误处理，针对非预期错误处理的 和开发者抛出错误处理的

路由模块中三个核心

  1. UI组件，路由文件的默认导出组件, 用于渲染页面
  2. loader，方法, 为UI组件提供服务器的数据
    1. 在该方法中可以使用服务端包或工具, 如数据库的访问,
    2. 该方法在构建时会被裁剪并捆绑到服务端包中, 不会暴露到客户端包中
  3. action，方法, 为UI组件的 form表单实现提交处理
    1. 在该方法中可以使用服务端包或工具.如数据库的访问,
    2. 该方法在构建时会被裁剪并捆绑到服务端包中, 不会暴露到客户端包中

选型建议

静态内容为主的，如 Blog, 文档站点等，选 Nextjs，或 Astro

  • 部署到静态内容托管平台上的, 推荐Next.js的SSG模式

动态内容为主的，如管理后台, WebApp等，选择 SSR，例如 Remix

  • 如果你的项目以前使用了 react-router的SPA, 现在想迁移到SSR模式, 推荐Remix；