How to properly organize dynamic block updates?

Question

PHP

Hello, please do not throw stones at the question, I will try to express it as clearly as possible.
We are working on a site in which one of the pages can be called SPA with a stretch (when you click on a certain menu item, the content of a certain block is updated, the page is not reloaded). The function responsible for this works as follows:

function myrender(object, selector, modal){
    //$(  selector).load('/public_html/'+object+'.html');
    $.ajax({
        url: '/myrender',
        type: "post",
        data: 'load='+ object +'&modal='+ modal,
        beforeSend: function(){

        },
        success: function(data){
                if(data.length > 100){/*Проверяя длину ответа, мы можем примерно понять пришло сообщение джсон ,или же хтмл*/
                    $(selector).html(data);
                    //alert(data.length);
                }
                else {
                    data = JSON.parse(data);
                    alert(data.msg);
                }
          }
    });

}

We have a backend on Slim 2.

/*
Полный код приводить думаю нет смысла, так как тут только
всякие проверки и валидации и запросы к БД

*/
  $app->render('/public_html/'$_POST['load'].'html',['data'=> $data]/*данные к отправке*/;

The problem is that when the page is loaded for the very first time, when the user clicks on the elements that call the myrender function, the information in the desired block does not change at all. However, after 10 -15 seconds (or even more), this function inserts all the blocks that the server returned for the committed function calls, one by one. As I understand it, the server (so far it is a local machine) simply does not have time to give all the answers at once.

So, tell me please, what is the best thing to do in this situation? Do something with Ajax to increase its performance, or display all the blocks at once, removing their visibility and turning them on depending on what the user wants?
PS I know that there are various frameworks for SPA, but in our project only one page requires such functionality, so it was decided to refrain from using them.

Answer 1

1. Check why the server is taking so long to respond. What's in beforeSend, maybe there's a timeout or a hell of a function to calculate the flight path of the cuckoo's nest.
2. Do a timeout, after which the response no longer matters and the block will not be updated or a regular get will be performed.
3. The bike that you invent has already been invented. It's called pjax: https://github.com/defunkt/jquery-pjax