Improving API Response Time: Should I build custom endpoint or optimize existing calls?

Other Questions API
1

Hi everyone! I’m working on an animal shelter website as a learning project and running into performance issues. I’m fetching data from a public government endpoint but the loading times are really slow.

Here’s my current setup:

created() {
  axios.get('https://api-proxy.herokuapp.com/http://opendata.gov.service/api/animals/shelter-data')
  .then(res => res.json())
  .then((result) => {
    this.animalList = result;
  })
}

The page takes forever to display anything. I’m using React for the frontend. I also tested with Express.js on the backend but got similar slow results.

I’m thinking about creating my own backend service that pulls from their API, but since the data refreshes daily, I’m not sure if caching would help much.

What are some strategies to make this faster? Should I paginate the results or is there a better approach?

Appreciate any suggestions!

2

Caching can significantly improve performance, even if the data refreshes daily. Consider creating a middleware service that retrieves data from the government API once every 24 hours and stores it in a SQLite database or a JSON file. This approach will help eliminate long loading times on the frontend. Additionally, implement progressive loading: display a skeleton UI initially, then populate it with the incoming data. Start by loading smaller chunks to provide users with quick feedback while the rest of the data loads in the background. If you decide to build a custom backend, incorporating basic filtering and sorting features will enhance interactivity.

3

tbh that api-proxy.herokuapp.com is probably your bottleneck. heroku’s free tier is crazy slow and proxy services just add more lag. hit the govt api directly first - see if that’s really the problem before you build your own backend

4

It appears there’s a small error in your axios call; you shouldn’t need to use .json() because axios automatically parses the JSON for you. Instead, change your line to this.animalList = res.data. However, in terms of improving performance, implementing pagination would be vital. Fetching thousands of records at once can overwhelm the frontend, regardless of caching. If your API allows it, add parameters like ?limit=50&offset=0 to paginate results. If not, consider fetching all data once daily in your backend and then serving it in paginated segments to the frontend; this way, you maintain data freshness while enhancing performance.