Skip to content
导航

Remix

Remix 是 React 社区生态中的一种 SSR 解决方案,它的服务端基于 express 开发,它的客户端使用 React 开发一些内置组件为用户提供便利。

它的特色在于,它还是一个代码模板脚手架,内置了三种代码模板,每个模板都集合了相当多的业界前沿流行库。还支持自定义github代码模板库,方便团队使用。

Demo

通过create-remix创建的代码Demo 仓库

shell
npx create-remix@latest

其中,交互式选项 app type 选择了 pre-configured stack

采用基本的 SSR 代码模板,生产环境构建后,客户端JS gzip压缩后也达到了 77KB

client JS

[email protected] 构建产物输出为ES模块,从HTML源码上就可以清晰地看到,内联JS import 4个客户端JS:

  • manifest:路由JS文件索引
  • root:对应.tsx文件,存放页面结构
  • routes/_index:对应.tsx文件,存放页面应用逻辑
  • entry:对应.tsx文件,执行路由、水合等客户端JS逻辑

Remix的理念可以概括为四点:

  • 采用Server/Client模型,将代码与内容/数据分离
  • 使用ES模块
  • 使用JS模拟浏览器行为,例如:滚动到页面位置
  • 不过度抽象底层,容易理解代码结构

它确实做到了这4点。

参考资料

https://remix.run/