Limit API Calls in nextJS to Hygraph

I’m building nextJS webApp that accesses hygraph for data management via API calls(GraphQL).
Hygraph limits the free plan to 1M API calls per project per month. Each page on the webapp requests data independently through API with useeffect. For example:

const Team = () => {
    let router = useRouter();
    const [profile, setProfile] = useState(); ///Team profile
  useEffect(() => {
    if (router.isReady){
      const { slug } = router.query;
      getTeamProfile(slug).then((data) => setProfile(data)); ///this is a call to the function that executes 
 ////////////the gql`` query and returns data
    }  
  }, [router.isReady]);
////Rest of the code
}

The code works fine but I fear those 1M API call a month won’t be nearly enough once the user base grows since the app is set to be used across the country and I want to remain in the free plan for now. The data itself doesn’t change often So I’m looking for strategies to limit the number of API calls to Hygraph per web client.

I have thought about running a different server which does request all the necessary Hygraph data and let my app retrieve from it, or just have a public object that stores all the data but this might take longer to load. Is there a better or simpler way to solve this?