I am using Next.js 14.2.3 to build a website, the other pages on the website are static generated at build time and static rendered, on the other hand, i have a page or route that is dynamically rendered. On local dev, when i click on the link go to the page, “http://localhost:3000/test”, it renders quickly but when this is deployed on aws amplify, and i go to the page “https://test.d2oa4hihp69p02.amplifyapp.com/test/” the page takes about 10 seconds to open and sometimes i get the error. “This page isn’t working test.d2oa4hihp69p02.amplifyapp.com took too long to respond.
HTTP ERROR 504”. I also have similar problems when i click on a link to view a single dynamic page within the test page https://test.d2oa4hihp69p02.amplifyapp.com/test/webstreams-medical-training-goes-global

I read and followed this part of nextjs documentation https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes. am i doing it wrongly? because it works perfectly in my local dev.

Here is my server component below

async function Test({ searchParams, params: { lang } }) {
  const query = searchParams?.query || "";
  const sort = searchParams?.sort || "ASC";
  const industry = searchParams?.industry || "";


  let casestudies = await getAllCStudies(
    industry,
    BATCH_SIZE,
    null,
    null,
    null,
    sort,
    "DATE",
    query,
    lang
  );

  let categories = await getCaseStudyCategories("en");

  return (
    <div>
    
      
      {casestudies.nodes.map((item) => {
        return (
          <div style={{ fontSize: "2rem", padding: "1rem", cursor: "pointer" }}>
            <Link href={`/test/${item.slug}`}>
              {item.title} <br />
            </Link>
          </div>
        );
      })}

     
    </div>
  );
}

export default Test;

Here are the functions that calls the endpoint below

export async function getAllCStudies(
  categoryName,
  first,
  after,
  last,
  before,
  order,
  field,
  query,
  lang
) {
  const orderby = {
    order,
    field,
  };

  const variables = {
    orderby: [{ field, order }],
    first,
    after,
    last,
    before,
    query,
    lang,
  };

  let categoryFilter = "";
  if (categoryName) {
    variables.categoryName = categoryName;
    categoryFilter = "$categoryName: String!,";
  }

  const data = await fetchAPI(
    `query Casestudy ($orderby: [PostObjectsConnectionOrderbyInput], $first: Int, $after: String, $last: Int,$before: String, $query: String, $lang: String, ${categoryFilter}) {
      casestudies(where: { ${
        categoryName ? "categoryName: $categoryName," : ""
      } orderby: $orderby, search: $query, language: $lang }, first: $first, after: $after, last: $last, before: $before) {
        nodes {
          title
          slug
          date
          casestudies {
            metatitle
            metadescription
            description
            companyLogo {
              mediaItemUrl
              srcSet
              altText
            }
            companyName
            mainimage {
              altText
              mediaItemUrl
            }
          }
          categories {
            nodes {
              id
              name
            }
          }
        }
        pageInfo {
          endCursor
          hasNextPage
          hasPreviousPage
          startCursor
        }
      }
    }`,
    {
      variables,
    }
  );



  return data?.casestudies;
}

export async function fetchAPI(query = "", { variables } = {}) {
  const res = await fetch("https://apibkofc.globalvoices.com/graphql", {
    next: { revalidate: 30 },
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  if (!res.ok) {
    console.error(res);
    return {};
  }

  const { data } = await res.json();
  
  return data;
}