从api获取数据并渲染需要太多时间

Question

导航菜单

import { v4 as uuid } from "uuid";
import Link from "next/link";
import { getAllCategories } from "src/utils/api";

export default async function NavMenu() {
  const {data: categories} = await getAllCategories();

  return (
    <div className="NavMenu">
      <ul className="NavMenu__categories">
        {categories?.map((cat) => (
          <li key={uuid()} className="NavMenu__category">
            <Link href={`/category/${cat.name}`} prefetch={true}>{cat.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

类别页面：（点击上面的链接即可打开）

export default async function CategoryPage({ params }) {
  
  const { data: products } = await getProductsByCategory(params.id);

  return (
    <div className="CategoryPage">
      <div className="CategoryPage__grid">
        {products.map((product) => (
          <ProductCard key={uuid()} name={product.name} price={product.price} />
        ))}
      </div>
      <div className="CategoryPage__pagination">
        <Pagination />
      </div>
    </div>
  );
}

从api函数获取数据：

export async function getProductsByCategory(category) {
  const url = productsURL;
  const params = {
    category_slug: category,
  };
  Object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
  );

  const products = await fetchTemplate(productsURL, "GET", publicHeaders);
  return products;
}

从 api 加载项目的时间太多。

我的 api 有 15 个项目。当获取特定类别页面的数据时，它会过滤 3 个项目，但渲染需要大约 4-6 秒。

当我点击链接时，它会导航到类别页面。

但是需要太多时间。

我想在这种情况下，我必须选择一种更好的方法来从 api 获取数据。

您有一些改进建议吗？

Answer 1

客户端数据获取： 考虑使用 SWR 或 React Query 等客户端数据获取库在客户端获取数据，从而减少初始页面加载时间。

数据分页： 实现分页以最初加载较小的数据集，并在用户与页面交互时获取更多数据。

缓存： 对 API 响应实施缓存，以从缓存中提供先前访问过的类别的数据。

优化API响应： 优化API响应，保证效率，避免发送不必要的数据。

加载状态： 实现加载状态或骨架 UI 以在数据获取期间提供视觉反馈。

预取： 继续使用预取策略，例如 Link 组件中的 prefetch 属性，以获得更好的用户体验。

// Install SWR using: npm install swr
import useSWR from 'swr';

export default function CategoryPage({ params }) {
  const { data: products } = useSWR(`/api/products?category=${params.id}`);

  if (!products) {
    // Loading state
    return <div>Loading...</div>;
  }

  return (
    <div className="CategoryPage">
      {/* Render your products here */}
    </div>
  );
}