开源技术专栏 2023-08-16 07:01 发表于浙江
开箱即用的研发框架，内置工程配置、状态管理、数据请求、权限管理等最佳实践，让开发者可以更加专注于业务逻辑。
「设计理念」：在传统的编码模式下，数据请求一般在组件内部发起，依赖于业务 Bundle 的加载解析执行，整个过程是串行、阻塞的。而在 ice.js 中，页面的数据请求会由框架（或容器）统一发起，和业务 Bundle 的加载解析是并行、不阻塞的。
src/pages/index.tsx
import { useState, useEffect } from 'react';
export default function Home() {
const [data, setData] = useState();
useEffect(async () => {
const data = await fetch('https://example.com/api/xxx');
setData(data);
}, [])
return (
<>
<div>Hello ICE</div>
<div>{JSON.stringify(data)}</div>
</>
);
};
在 ice.js 中，我们推荐将页面的的数据请求和 UI 实现解耦，通过 dataLoader 来定义页面的数据请求。示例：
src/pages/index.tsx
import { useData, defineDataLoader } from 'ice';
// 页面组件的 UI 实现
export default function Home() {
const data = useData();
return (
<>
<div>Hello ICE</div>
<div>{JSON.stringify(data)}</div>
</>
);
};
// 页面的数据请求
export const dataLoader = defineDataLoader(async () => {
const data = await fetch('https://example.com/api/xxx');
return data;
});
通过 dataLoader 导出的数据请求，会由框架在进入页面时发起，和业务 Bundle 的加载解析是并行的。在支持预请求的容器下（例如 PHA），数据请求还可以被进一步的提升为预请求。
同一个项目，两种不同写法，数据请求发起时机的差异对比如下（测试环境 chrome slow 3G)：
服务器渲染，简称 SSR (Server Side Rendering)，是一种在服务端运行 Node.js 程序动态生成 HTML 的渲染方式。SSR 相比传统在浏览器端渲染的模式(CSR)，受设备性能和网络情况的影响更小，可以达到更好的性能体验和 SEO 能力。
在 ice.config.mts 中，增加如下配置：
ice.config.mts
import { defineConfig } from '@ice/app';
export default defineConfig(() => ({
// ...
ssr: true,
}));
开启 SSR 后，路由组件中导出的 dataLoader 方法将优先在 Server 端执行，如果 SSR 渲染成功，在 Client 端将不会再次调用 dataLoader，而会复用 SSR 的结果。当页面在浏览器侧通过路由跳转，或页面降级时，才会在 Client 端调用 dataLoader。
src/pages/foo.tsx
import { useData, defineDataLoader, defineServerDataLoader } from 'ice';
// 同构的数据请求
export const dataLoader = defineDataLoader(async () => {
if (isClient) {
return await fetch('https://example.com/api/xxx');
} else if (isServer) {
return await fetchDataAtServer();
}
});
如果确实需要为 Server 端指定不一样的数据请求方式，可以通过定义 serverDataLoader 来实现。
开发前端应用前需要安装 Node.js，并确保 node 版本是 14.x 或以上。推荐使用 nvm（Windows 下使用 nvm-windows） 或者 fnm 来管理 node 版本。下面以在 mac 下安装 nvm 为例：
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 安装 node 14 版本
$ nvm install 14
# 使用 node 14
$ nvm use 14
# 验证 node 是否安装成功
$ node -v
v14.19.3
安装 Node.js 后，默认会包含 npm。除此以外，还有其他的包管理工具，示例安装 pnpm 示例如下：
$ npm i pnpm -g --register=https://registry.npmmirror.com/
# 验证 pnpm 是否安装成功
$ pnpm -v
7.1.7
如果经常需要切换 npm 镜像源，推荐使用 nrm 进行管理：
$ npm install -g nrm
# 验证 nrm 是否安装成功
$ nrm --version
# 查看所有镜像源
$ nrm ls
# 推荐使用淘宝镜像源
nrm use taobao
开源协议：MIT
开源地址：https://github.com/alibaba/ice
项目合集：https://github.com/RepositorySheet
-END-
联系客服
