Next.js and reusable API calls

Question

In my Next.js blog app, I am getting content by using an external API call. I am using the same two calls over several pages (post, categories, tags, authors etc.). Instead of repeating these calls I have been trying to create two main global calls like this

import { getAuthors } from "@/libs/getAuthors";
import { getPosts } from "@/libs/getPosts"; 

export async function getStaticProps() {
  return {
    props: {
      posts: getPosts(),
      authors: getAuthors(),
    },
    revalidate: 1,
  };
}

I also had to add the following to my next.config.js

module.exports = {
  images: {
    domains: ["images.ctfassets.net"],
  },
  webpack: (config) => {
    config.experiments = { topLevelAwait: true, layers: true };
    return config;
  },
};

as partially described in this answer. This works, but slows down the page quite a lot, why is this happening? What's the correct way to create and use such global API calls?

UPDATE:

import { createClient } from "contentful";

const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_KEY,
});

const auth_data = await client.getEntries({ content_type: "author" });

export function getAuthors() {
  var authors = [];

  var auth_len = auth_data.items.length;
  for (var i = 0; i < auth_len; i++) {
    authors.push({
      authorSlug: auth_data.items[i].fields.name
        .toString()
        .replace(/ /g, "-")
        .toLowerCase(),
      authorContent: auth_data.items[i].fields.description,
      authorFrontMatter: {
        title: auth_data.items[i].fields.name,
        image: "https:" + auth_data.items[i].fields.image.fields.file.url,
      },
    });
  }
  return authors;
}