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

问：

导航菜单

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 获取数据。

你有什么改进建议吗？