NextJs 数据篇 - 数据获取 | 缓存 | Server Actions

import { useEffect, useState } from 'react';
import { useQuery } from 'nextjs-data-fetching';
 
// 假设我们有一个获取用户数据的服务
import userService from '../../services/userService';
 
export default function UserData({ userId }) {
  // 使用nextjs-data-fetching库的useQuery钩子
  const { data, isLoading, error } = useQuery(userService, { userId });
 
  // 使用React的useState钩子来管理缓存的用户数据
  const [cachedData, setCachedData] = useState(null);
 
  // 如果数据加载完毕，更新缓存
  useEffect(() => {
    if (data) {
      setCachedData(data);
    }
  }, [data]);
 
  if (error) {
    return <div>Error fetching user data</div>;
  }
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>User Data</h1>
      <p>ID: {cachedData.id}</p>
      <p>Name: {cachedData.name}</p>
      {/* 其他用户数据的展示 */}
    </div>
  );
}

这个代码示例展示了如何在Next.js应用中使用React的函数组件和服务来获取用户数据，并通过useQuery钩子进行数据获取。同时，它使用useState钩子来管理缓存的用户数据，并通过useEffect钩子在数据加载完成后更新缓存。最后，它处理了加载状态和错误状态，并展示了用户数据。