I'm a volunteer for this association/game called FAF. We have a leaderboards (https://www.faforever.com/competitive/leaderboards/1v1) of players that we get through API calls. However, it isn't very efficient to make it so everytime someone opens the leaderboard page to make an API call to get the rankings. However, Imagine if 1000 people visit it, that would be 1000 calls to the API all for the exact same information.
Therefore, I've been trying to search and search of a method to do an API call, store that in the code and show that to the users. Then find a way to automatize said API call to be every 30min - 1h. So that way, its just 1 call that stores the info for users to see, rather than a new call for the same information every time an user opens the leaderboards page. However, I can't find anything of how to do this with js (fetch, ajax, json). I'm still learning front-end dev so I'm not sure if there is even a way to do this?
Would appreciate a lot if you could link me to a resource or coding "technique" to achieve this using JS. Thanks!
What you are describing is caching. Caching is an extremely common technique to reduce server load and latency. Most web server libraries offer some kind of cache functionality, which can be found in their respective docs. Frontend caching is not quite as common but can be achieved using local storage as mentioned in this blog post https://medium.com/@brockreece/frontend-caching-strategies-38c57f59e254
Here is another article about caching, this time a bit more general using nodejs https://www.honeybadger.io/blog/nodejs-caching/