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点。