导航菜单

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获取数据。
你有什么改进的建议吗？