2

I have 2 pages, one is a user list, and one is user detail. There's a gallery on the user detail page, how can I use prefetch to make the app experience better? I can push the gallery images to the user list API. But it makes the first page (user list) slower?

I have another idea, prefetch only when the user hovers to a user in the user list page, and when they click on the link, they won't have to fetch the images from scratch. What do you think?

Sweta Jain
  • 3,248
  • 6
  • 30
  • 50
Fay Chen
  • 521
  • 1
  • 4
  • 12
  • So the hover part doesn't sound like prefetching, it actually sounds like the opposite, but you could probably achieve it [like this](https://stackoverflow.com/questions/62871284/load-third-party-iframe-in-react-after-page-load-so-that-the-iframe-does-not-af) but with `onHover` or something instead of scroll – Sam Sep 24 '21 at 04:15
  • maybe I misunderstood prefetching? if my user list api return the images, how do I prefetch them without sacrifice the speed load on the user list page? – Fay Chen Sep 24 '21 at 04:29
  • I think you're asking about the concept behind SSGs. They are superfast and pre-rendered. Gatsby, Nextjs as some wonderful ssgs to look into if coding in react. – Servesh Chaturvedi Sep 24 '21 at 05:50
  • @ServeshChaturvedi but does nextjs render the image when the response is just a img URL? how? – Fay Chen Sep 24 '21 at 08:10
  • I'm sure a youtube tutorial or crashcourse will give much clearer answer than I can here. – Servesh Chaturvedi Sep 24 '21 at 12:12
  • @ServeshChaturvedi how would you optimize if you're in my shoe, forget about my suggestion about prefetching – Fay Chen Sep 24 '21 at 12:30
  • Instead you could optimize your gallery view to show only 3-4 thumbnails rather than a the entire photos in full size. You can then use pagination or infinite-scroll to gradually load more data. – SMD Oct 01 '21 at 19:05

0 Answers0