Modern.js 中的 useLoader API 详解：实现同构数据加载

概述

在现代前端开发中，数据加载是一个核心功能。Modern.js 框架提供的 useLoader API 是一个同构(isomorphic)数据加载解决方案，它能够在服务端渲染(SSR)和客户端渲染(CSR)场景下无缝工作，极大地简化了数据获取逻辑。

useLoader 的核心特性

useLoader 主要具有以下特点：

1. 同构能力：在 SSR 过程中，服务器会预先执行数据获取，然后将数据序列化到 HTML 中，客户端可以直接复用这些数据，避免重复请求。

2. 异步处理：基于 Promise 实现，完美支持异步操作。

3. 生命周期管理：提供了加载状态、错误处理等完整的生命周期管理。

4. 参数驱动：可以通过参数变化自动触发重新加载。

API 详解

基本用法

import { useLoader } from '@modern-js/runtime';

function MyComponent() {
  const { data, loading, error } = useLoader(async () => {
    return fetchData(); // 你的异步数据获取逻辑
  });
  
  // 渲染逻辑...
}

完整参数说明

useLoader 接收两个参数：一个加载函数和一个可选的配置对象。

加载函数(loaderFn)：

• 类型：(context: runtimeContext) => Promise<unknown>
• 接收运行时上下文作为参数
• 必须返回一个 Promise

配置选项(options)：

• onSuccess: 数据加载成功的回调函数
• onError: 数据加载失败的回调函数
• initialData: 初始数据，在首次加载前使用
• skip: 设置为 true 时跳过加载
• params: 参数对象，当其序列化结果变化时会重新触发加载
• static: 设置为 true 时用于静态生成(SSG)

返回值

useLoader 返回一个包含以下属性的对象：

• data: 加载成功后的数据
• loading: 是否正在加载中(首次加载)
• error: 加载错误信息
• reload: 重新加载的函数
• reloading: 是否正在重新加载中

使用场景示例

基础数据加载

function UserProfile() {
  const { data, loading, error } = useLoader(async () => {
    const response = await fetch('/api/user');
    return response.json();
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
    </div>
  );
}

带参数的数据加载

function ProductDetails({ productId }) {
  const { data } = useLoader(
    async (_, id) => {
      const response = await fetch(`/api/products/${id}`);
      return response.json();
    },
    { params: productId }
  );

  // 当 productId 变化时，会自动重新加载数据
}

手动重新加载

function RefreshableData() {
  const { data, reload, reloading } = useLoader(fetchData);

  return (
    <div>
      <button onClick={reload} disabled={reloading}>
        {reloading ? 'Refreshing...' : 'Refresh Data'}
      </button>
      {/* 渲染数据 */}
    </div>
  );
}

最佳实践

1. 错误处理：始终处理加载错误状态，提供良好的用户体验。

2. 加载状态：显示加载状态，避免用户困惑。

3. 参数优化：合理使用 params 属性，避免不必要的重新加载。

4. 初始数据：对于关键数据，考虑提供合理的初始数据，避免页面布局跳动。

5. SSR 配合：在 SSR 场景下，确保服务端和客户端的数据结构一致。

注意事项

1. 当前在使用 Rspack 作为打包工具时，useLoader API 暂不支持。

2. 对于静态生成(SSG)场景，需要设置 static: true。

3. 在复杂的应用场景中，可以考虑将 useLoader 封装成自定义 Hook，实现业务逻辑的复用。

useLoader 是 Modern.js 框架中一个强大的数据加载工具，合理使用可以大大简化应用的数据管理逻辑，特别是在同构应用开发中展现出巨大优势。通过本文的介绍，希望开发者能够更好地理解和运用这一 API。