Next.js Discord

Discord Forum

How can I load the same asset multiple times without the multiple extra weight?

Answered
Sphynx posted this in #help-forum
Open in Discord
SphynxOP
I have a page where I have to load the same asset several times (a list of assets that needs to be infinite and repeat), but that's going to have a huge payload so I'm wondering if it's not possible to load the same asset multiple times and the browser knows it's actually the same.
The videos from bunny CMS & Images from prismic.

I think it's specially for the videos, that are on autoplay...
Answered by Thrianta
I hope someone can correct me, but I think the browser just automatically knows it's the same asset.

If I make a bunce of <img /> components that all use the same src tag, the browser only downloads that image once, right?

const imgs = []
for (let i = 0; i < 10; ++i) imgs.push(
  <img key={i} src="http://google.com/my-img" />
)

return <>{imgs}</>
)
View full answer

5 Replies

Thrianta
I hope someone can correct me, but I think the browser just automatically knows it's the same asset.

If I make a bunce of <img /> components that all use the same src tag, the browser only downloads that image once, right?

const imgs = []
for (let i = 0; i < 10; ++i) imgs.push(
  <img key={i} src="http://google.com/my-img" />
)

return <>{imgs}</>
)
Answer
SphynxOP
For videos as well?
I tried a couple and it felt like the page ended up weighing 40mb
Thrianta
The page may lag or feel slow, that has to do with the browser rendering a lot of content. But the network requests tab should show only one get request for the video.
SphynxOP
thank you for your input!