Modern.js 中的 useLoader API 详解：优雅处理异步数据加载

概述

在现代前端开发中，数据加载是应用开发的核心环节之一。Modern.js 框架提供的 useLoader API 是一个强大的同构数据加载解决方案，它能够优雅地处理服务端渲染(SSR)和客户端渲染(CSR)场景下的数据获取问题。

useLoader 的核心特性

useLoader 作为 Modern.js 运行时核心 API 之一，具有以下显著特点：

1. 同构能力：在 SSR 和 CSR 环境下都能正常工作，服务端预加载数据后客户端会直接复用
2. 异步处理：基于 Promise 的异步数据获取机制
3. 生命周期管理：提供完整的加载状态管理和错误处理
4. 参数响应：根据参数变化自动重新加载数据
5. SSG 支持：可用于静态站点生成时的数据预获取

API 深入解析

基本用法

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

function MyComponent() {
  const { data, loading, error } = useLoader(async () => {
    return fetchData(); // 返回一个Promise
  });
  
  // 渲染逻辑...
}

完整参数说明

useLoader 接受两个参数：加载函数和配置选项。

加载函数 (loaderFn)：

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

配置选项 (options)：

返回值详解

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

• data: 加载成功后的数据
• loading: 是否正在加载中
• error: 加载错误信息（如果有）
• reload: 函数，用于手动重新加载
• reloading: 手动重新加载时的加载状态

使用场景与最佳实践

场景一：基础数据加载

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

场景二：带参数的数据加载

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

场景三：错误处理

const { error } = useLoader(
  async () => {
    throw new Error('Failed to load');
  },
  {
    onError: err => console.error('加载失败:', err)
  }
);

场景四：手动重新加载

const { reload } = useLoader(/*...*/);

<button onClick={() => reload({ id: newId })}>
  重新加载
</button>

注意事项

1. Rspack 兼容性：当前版本在使用 Rspack 作为打包工具时不支持 useLoader API
2. 性能优化：合理使用 initialData 避免不必要的加载状态闪烁
3. 参数序列化：params 的变化是通过序列化比较的，避免使用复杂对象
4. SSG 使用：设置 static: true 时确保加载函数能在构建时执行

总结

Modern.js 的 useLoader API 为开发者提供了一种声明式、同构的数据加载解决方案。通过合理利用其提供的各种配置和返回值，开发者可以轻松实现复杂的数据加载逻辑，同时保证应用在 SSR 和 CSR 环境下的一致表现。无论是简单的数据获取还是复杂的加载状态管理，useLoader 都能提供优雅的解决方案。