Thoughts on Infinite Scroll Pagination

I’ve looked over Mike Roibu’s post, Infinite Scrolling Pagination in Hugo Website. More or less I like the idea of it, and I’m trying to flesh out an idea for how I want to paginate for my site.

The first idea I’d like to play around with is instead of having each page in the Paginator have the page items in the previous pages, I think I’m going to play around with only having the pages on that page in there. It’s true that by using JavaScript it still ends up downloading a whole new page in practice, but then I could just do something like:

(async () => {
  /* Set some stuff up */
  let currentPagePaginationContainer = document.querySelector(".all-entries");
  let currentPageNextLink = document.querySelector(".next-page");
  let nextPage = currentPageNextLink.getAttribute("href");
  let nextPageDom = document.createElement("template");

  /* Get the next page asynchronously */
  console.log("pagination: Fetching next page...")
  let response = await fetch(nextPage);
  let data = await response.text();
  console.log("pagination: Next page fetched!");

  /* Get the new Pagination items of the next page and append */
  nextPageDom.innerHTML = data;
  let newPaginatorItems = nextPageDom.querySelector(".all-entries").content;
  currentPagePaginationContainer.appendChild(newPaginatorItems);
  console.log("pagination: New items added!");

  /* Update the next page link on the current page */
  let newNextLink = nextPageDom.querySelector(".next-page").getAttribute("href");
  currentPageNextLink.setAttribute("href", newNextLink);
  console.log("pagination: Updated next page link!");

  /* TODO: Update history so that forward/back works correctly */

  /* TODO: Disable/Override the next page link to load more page items */

  /* TODO: Use the Intersection Observer API to get new items */
})();

Some thoughts, though, while I was thinking this kinda dirty code that I don’t know works is that should a user press Back they’ll be sent back to the previous page. Which would normally be okay, but if they got to their last page by clicking on an item that was added, that item would, understandably, not be there. Or, more specifically, if the history is updated, they’ll get to a page where the item is there, but items before it may not be there and would require further pressing of back. Perhaps Mike’s method of having all items on a page would be better for site visitors. This requires a bit more thought, but I don’t like the idea of downloading more than is needed.

Also, implied, I’d like to try doing this using vanilla JavaScript to tackle one of his post’s proposed improvements.