Make back button load from cache

General Web Dev
1

Hey,

I am working on a project that shows a list of posts. At the end of the list, there is a button to load more posts, this button will load 12 more posts to the bottom of the list through Ajax.

I am having what seems like a very common issue, but one that I, after searching for a few days, could not find the solution to, thus I am asking here.

The scenario:
Users will click on the button to load more posts, it doesn’t really matter how many times they do this, but let’s say for example sake that they click enough times to load 100 more posts, and then they decide to click on a post to read the full post.

The issue:
Now is the issue. When the users click the Back button, they will get back to the posts list, but, the posts list will reload the page as a “new” request, not showing the already loaded 100+ posts from the previous encounter with the page.
This means that if someone clicked on a post and wants to go back to the same place they were at, they will have to keep scrolling to the bottom and clicking on the “Load more posts” button many times until they get back to where they were.

The goal:
What I want to achieve is that the users will click the back button, and the browser will send the users back to the same location they were at, including scroll position (which it seems to already do) and the number of posts that were already loaded - basically, send them back to the posts list as they left it.

What to do?
I could update the URL each time the “Load more” button is clicked with the number of posts that have been shown or the number of times the button was clicked, and then when the users go back, to load either the same amount of posts based on the URL, or the post “position” (skipping x amount of posts to get to the same “position” they were in), but this could either lead to a very large HTTP request (loading a hundred posts at once, or more if they loaded more) or, when the user scrolls back up they would have to click another button to load previous posts, which is just another button that I prefer not to add due to the purpose of the website.

Ideally, the back button would load a cached version of the page, that way it will lead to the same scroll position, the same content will be loaded, and it won’t involve a new HTTP request - it will show the page as it was when they left it.

Also:
The website uses PWA, not sure if this helps at all, but just FYI since it has some caching options.

Any thoughts?

2

How does the ‘Load more’ button work? If it’s dynamically fetching and loading elements into the page, then the cached page does not contain any of the posts.

3

The page is initially loaded with 12 posts.
Clicking on the Load More button will load 12 more posts each time through ajax.

4

so here’s what you do.

go to view-source:http://www.example.com (whatever you address is).

What you see there? That’s what the browser knows.

Anything more than that? Brand new fetches.

5

So you’re saying that when I load more posts, the new ones loaded cannot be cached?

So what can be done?

6

Well, i didn’t actually say that. The browser’s cache can’t hold them.

You could store them in local storage, but the question is, do you want to.

Consider: What if someone posts a new post between the time they go to a link, and the time they go back? Do you not want them to see the new post? (Any form of caching/storage has this problem; the data is no longer live, it is inherently stale.)

2 Likes
7

True, but, if they are not viewing the most recent posts due to scrolling down and loading more and more posts, then in this case they may not need to be on a “live” version since they anyway are viewing older posts farther down the list, and a cached one will do.
There could also be in this case a button to “Check for recent posts” that would load new ones if they exist.

I have been suggested to try localStorage, but im not sure thats the best way as i would have to store each individual post item data (poster name, id, image, title, content, etc.), and if anything changes in the structure i will have to go to the code and update what is saved.
Or maybe i dont understand localStorage enough and its not that complicated.

8

You would. But your options are: 1) localStorage, or 2) not-localStorage, which is the problem you were trying to solve in the first place.

If I scroll down to post 50, click on it, and then come back to the page, you don’t need to show me any posts that have appeared between the time i clicked on post 50 and now?
How long does this logic hold true? What if i come back an hour later? 6? 2 days? a year?

9

I see what you mean.

There would have to be some sort of limit to this, maybe after say 10 minutes, the user would go back to a live version, otherwise, the user would get a cached version, for the purpose of the project, this does make sense.

Now the question is if saving each item in the list to localStorage is the only option in terms of cache.

Basically, each item that is loaded in the list would have to be saved in localStorage, then, when a user clicks the back button, if the specific localStorage containing the list items is from under 10 minutes ago, use that as the data source instead of the database?

I wonder how sites like Facebook and Twitter do it.

11

If I had that knowledge I would be in a much better paid job.

It’s the only one that strikes to my mind, unless someone else has a better idea.

12

Good point!

I think I need a better understanding of caching strategies in general actually as I am also facing some other challenges now with cache

I am working on a project to create a sort of MVC-inspired framework and app in PHP and used jQuery to handle small things such a DOM altering and ajax requests, the framework is basically done for this project and I am working on the actual app part of it, but, even though the app is loading fast, it’s not fast enough, or as fast as it could be.

Specifically, the static pages such as contact, faq, terms, and other pages that don’t use a database and don’t really ever change that much, are not loading as fast as they could, so I would prefer to find a way to cache those pages and load them from the cache.
Going through tutorials now, I see that if I used a different JS framework, this could have been relatively easy, but I didn’t, so now I have to figure out a way to load these pages from cache, and to get them from the actual server only when the page is actually updated (I thought about using my existing service worker for this but couldn’t find a way yet to do it for specific pages).

I could just load them with Ajax, but, then I’m back to the original issue of the back button not undoing JS functions.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.