开源技术专栏 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-
联系客服