Avoid image blinking when back button is hit

Question

I'm developing a web interface with an Instagram-like navigation. This means that I have a grid of pictures and when I click on one of these I go to another page that shows me the details of the image that I clicked. Then the user can go back by clicking the back button (or sliding right if using iphone).

The problem I have is that when the user goes back to the grid page, the images are reloaded, it causes a bad effect. I analyzed the traffic and I saw that my Node.JS server correctly answer with 304 Not Modified when the image is requested. How to force the browser (safari for iphone 6) to don't reload the images? Is there a way to cache them?

The behavior I'd like to achieve is also similar to Facebook accessed from safari mobile. If you open a picture and then you slide to go back to the timeline, the images in the timeline don't blink.

This is how my server sends images:

My front end is in React.JS

Thanks for help

Answer 1

I'm talking way over my head here... but

Your images are not cached

Your problem is the max-age in the Cache-Control header that's being sent with your images. You have Cache-Control= public, max-age=0

Your headers pretty much tell the browser that the item is image is fresh for 0 seconds, which forces re-validation on every single load.

In other words the cache for you images are always "expired" the second they load. As if you had Cache-Control: no-cache

Answer 2

The browser is caching the images. The 304 Not Modified response tells the browser to use the images it has cached. In short, if your server is sending a 304 and you're seeing images on your device, those images are being cached successfully. But regardless of caching, it still takes an indefinite amount of time to send the request to the server and wait for the 304 response.

Caching isn't the problem here. The problem is that the page is reloading. You don't want to be sending any new requests, even ones you're hoping receive a 304 response. If you want the effect of Facebook or other fancy apps, you're going to need to create a Single-Page Application. Or at least mimic a SPA for this portion of your site.

Since you're using React, you're probably looking for React Router or a similar library to spoof navigability (so the back button takes the user back to the image list, forward takes the user back to that specific image, etc).

Then there are two ways to show the image details page.

1. When the user clicks an image, unmount the ImageList component (or whatever you called it) and mount the ImageDetails component. When the user clicks back, unmount the ImageDetails component and remount the ImageList component. This approach is very straightforward, especially when using React Router.

Here's the basic idea with React Router:

<Switch>
    <Route path="/images" component={ImageList} exact />
    <Route path="/images/:id" component={ImageDetails} />
</Switch>

2. Make the image details page a popover. This way the ImageList component is never unmounted. When the user clicks an image, merely mount the ImageDetails component. When the user clicks back, unmount it. This way is definitely harder, and I wouldn't really recommend it, but if your image list is very long, you might start seeing delays when react unmounts/remounts the ImageList component.