Caching and preloading a lot of images | Next.js | Page 1

vivid flare Dec 17, 2023, 12:36 PM

#

Hey

I have a site that's main job is to show users a lot of images on the page the moment the user joins the page. So lazy loading etc etc won't really help me.
Is there a way to start preloading my cdn images and cache them right away when the user first opens the nextjs app in any route?

These images come from cdn and never change. There is about 300 images so I really don't want to move them to static images to ./public

The point is, these images have to be fast and the cdn urls are known beforehand and they never change. How can I
display these 300 images on my page in the most optimized way?

Can I somehow preload these 300 urls and chace them

dull bobcatBOT Dec 17, 2023, 12:36 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

vivid flare Dec 17, 2023, 12:37 PM

#

Caching and preloading a lot of images

raw smelt Dec 17, 2023, 1:45 PM

#

you should use the Image Component from nextjs. That Component fetches the image from your cdn and caches it. Like that you can directly serve a large amount of images cached and optimized for the perfect UX ^^

vivid flare Dec 17, 2023, 11:32 PM

#

raw smelt you should use the Image Component from nextjs. That Component fetches the image...

Ok, thanks. I am using the Next Image component. Is there anything else I can do? For example if the images are shown in route C, can I somehow "preload" them in route A, or B for example, kind of "ahead-of-time"

raw smelt Dec 18, 2023, 6:05 AM

#

Yea, normally a cdn works with a shared cache. So whenever someone is on route c and the next person enter route c then everything is already cached ^^

vivid flare Dec 18, 2023, 3:09 PM

#

@raw smelt is this real? Then holy shit.

#

I'll obviously have to read more on it. Thank you!

#

I will not forget you beefbone

raw smelt Dec 18, 2023, 3:50 PM

#

Yes, that’s crazy 🙈
Please mark solution

dull bobcatBOT Dec 20, 2023, 2:47 PM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1185923359540785172 message)

raw smelt Dec 20, 2023, 2:49 PM

#

#Caching and preloading a lot of images