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
You can't speed up a slow API but look into CDNs
CDN?
i want to just render the image faster on client side
Content delivery network
Look it up
https://nasa-image.onrender.com here's the link from my side as you can observe it takes lot of time to displaythe images
CDN
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
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
or at least wait until the rest is loaded so you can preload the rest
good caching would help too (CDN would handle this for you)
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