How to render image that I'm fetching from from opensource API faster

I want to learn what are the ways to render high quality images that I'm fetching from from opensource API faster so that it take less time to display those images what are the techniques one can use? Tech: Reactjs method of fetching: fetch(), axios method to fetch: useEffect hook this are the steps i use generally
10 Replies
Zach
Zach9mo ago
You can't speed up a slow API but look into CDNs
unemployed
unemployed9mo ago
CDN? i want to just render the image faster on client side
Zach
Zach9mo ago
Content delivery network Look it up
unemployed
unemployed9mo ago
https://nasa-image.onrender.com here's the link from my side as you can observe it takes lot of time to displaythe images
Zach
Zach9mo ago
CDN
Jochem
Jochem9mo ago
most of your time is spent waiting for https://nasa-img-clone-server.onrender.com/popular and https://nasa-img-clone-server.onrender.com/recent, and some for https://nasa-img-clone-server.onrender.com/apod If you don't control those endpoints, there's nothing you can do about that. What Zach suggested could work by caching the responses yourself on a CDN, but I'm not sure that's allowed (though NASA images are supposed to be public domain?). That's something you'd have to figure out yourself though
MarkBoots
MarkBoots9mo ago
you are allready loading trending & popular, while on first load only the newest uploads are displayed. you could deside to only fetch those if the user actually clicks that button
Jochem
Jochem9mo ago
or at least wait until the rest is loaded so you can preload the rest
b1mind
b1mind9mo ago
good caching would help too (CDN would handle this for you)
unemployed
unemployed9mo ago
Well nasa images api are open source I just integrates the nasa image api Into my own api to setup cors restriction Thanks I'll research on it I tried redis for caching but it has no effect on performance
Want results from more Discord servers?
Add your server