0

I'm working on a Next.js application which consists of a single page, however, users are able to click on a few buttons that should reveal an image. I want to force clients to download the image before the user reveals this image through a click. Note that the images are resolved dynamically at build time, so I cannot preload them inside <head>. My getStaticProps retrieves the image URLs, and then inside useEffect of my page, I commit these URLs to a Redux store.

I thought that I may be able to start loading the images inside useEffect and commit the resulting Image from next/image into the Redux store from where they can be retrieved by my component that displays this image. However, committing ReactElement values into Redux appears to be an anti-pattern, so I'm not sure about this approach.

is there a way to canonical way to achieve what I'm trying to do?

Many thanks!

IVR
  • 1,718
  • 2
  • 23
  • 41

1 Answers1

0

I figured it out, it turned out to be easier than I thought. All I needed to do was loop over my images inside useEffect and load them like this:

const image = new Image()
image.src = imageUrl

That is all, I don't need to pass them down anywhere, because they get cached, so when I call the same URL from my component later, it gets loaded immediately.

IVR
  • 1,718
  • 2
  • 23
  • 41