How to write a competent single ajax-pagination on the site?

Question

Laravel

Good day everyone!
In fact, I wrote a single ajax pagination for the site, but it has 1 rather unpleasant jamb. I will describe in more detail below.
1. I added a new class to the pagination block - ajax-pagination.
2. Using jquery, I wrote an event and a function for working with pagination.

$body.on('click', '.ajax-pagination .paginate a', function (e) {
    e.preventDefault();

    let url = $(this).attr('href'),
        $paginateBlock = $(this).closest('.list-paginated-items');

    paginationChangePage(url, $paginateBlock);
    window.history.pushState('', '', url);
});

function paginationChangePage(url, $paginateBlock)
{
    $.ajax({
        type: 'get',
        url: url,
        success: function (result) {
            $paginateBlock.html(result);

            $('html, body').animate({
                scrollTop: $paginateBlock.offset().top
            }, 500);

            $(window).off('popstate').on('popstate', function () {
                paginationChangePage(location.href, $paginateBlock);
            });
        }
    });
}

3. In the controller methods, I use the following logic:

if (request()->ajax()) {
    return view('modules.chat.includes.messages', [
        'messages' => $messages
    ])->render();
} else {
    return view('modules.chat.index', [
        'messages' => $messages,
        'title' => 'Чат'
    ]);
}

It seems that everything is fine and correct, but this method has 1 unpleasant cant, which is reproduced only in mobile browsers (at least, it was not possible to reproduce it on the desktop). More about the jamb with an example:
1. I went to the chat page.
2. Clicked on 2 pages, then 3, etc.
3. I decided to click the link on the site to go to the main page.
4. I changed my mind, I press the "back" button in the browser.
5. I am thrown to the previous page, but it is not displayed, but only the piece that was loaded when changing the page in pagination. As a result, of course, a white page with only this piece of code.
That is, the mobile browser (using the latest version of chrome) apparently caches heavily, which displays what was sent in request ()-> ajax () on the previous page. After thinking, I came to the conclusion that using 1 method to display the page and only a piece with messages using request ()-> ajax () is not an option at all. Therefore, it is necessary to divide it into 2 methods: 1 will be responsible for displaying the entire page, and 2 - for loading the necessary messages. This is not a problem at all if I needed ajax pagination in 1-2 places, but I use it in many places, which is why I want to make a single ajax pagination that I can screw anywhere on the site.

Answer 1

As an option try the package: https://laravel-livewire.com/docs/pagination/