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.
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.
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.
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.
The website uses PWA, not sure if this helps at all, but just FYI since it has some caching options.