Paginazione ibrida Client side/Server side

Buongiorno a tutti, sto gestendo una chiamata rest alla mia api Java, la richiesta get con paginazione client side dovrebbe prendere tutti i dati del db e ritornarmeli in un unico array che io poi andro' a gestire e dividere tramite .slice() ecc… Ora, il problema che mi si pone davanti consiste nel limitare la richiesta get sul db a un numero x di record per poi effettuare le richieste successive incrementando offset, questo per leggere in volte separate i dati su db e non appesantire troppo il processo. Qualcuno ha consigli su come effettuare questa cosa? Io stavo implementando queste due funzioni ma non fanno cio' che mi aspettavo.

Il mio ragionamento e' stato il seguente: 

• effettuo una get in cui mi ritorno i primi 20 record con offset a 0
• inserisco questi 20 record di Immatricolazioni in un array this.immatricolazioniArray
• se viene clickata una page tra 5 e 10 allora incremento offset e faccio una nuova chiamata a db con offset a 20, salvo i record trovati in un array this.immatricolazioniArrayRefresh che a mio modo divedere andavo a concatenare con la funzione concat() a immatricolazioniArray
• Il mio problema e' che quando chiamo refreshResearch() non mi concatena gli array ma mi mostra a tabella al posto dei primi risultati di immatricolazioniArray l'array immatricolazioniArrayRefresh

Secondo me c'e' un problema di async pero' non so come risolvere al momento….

searchByExample() {
    let url = 'http://localhost:8080/RestApiMyBatis/webapi/immatricolazioni?';

    console.log('offset start-> ', this.offset);
    console.log('limit start-> ', this.limit);

    if (this.immatricolazioniGetForm.value.targa) {
      url += 'targa=' + this.immatricolazioniGetForm.value.targa + '&';
    }
    if (this.immatricolazioniGetForm.value.idMoto) {
      url += 'idMoto=' + this.immatricolazioniGetForm.value.idMoto + '&';
    }
    if (this.immatricolazioniGetForm.value.dataImmatricolazioneFrom) {
      url +=
        'dataImmatricolazioneFrom=' +
        this.immatricolazioniGetForm.value.dataImmatricolazioneFrom +
        '&';
    }
    if (this.immatricolazioniGetForm.value.dataImmatricolazioneTo) {
      url +=
        'dataImmatricolazioneTo=' +
        this.immatricolazioniGetForm.value.dataImmatricolazioneTo +
        '&';
    }
    if (this.offset != null) {
      url += 'offset=' + this.offset + '&';
    }
    if (this.limit != null) {
      url += 'limit=' + this.limit + '&';
    }
    //   if (this.orderBy != null) {
    //     url += 'orderBy=' + this.orderBy + '&';
    //   }
    //   if (this.orderHow != null) {
    //     url += 'orderHow=' + this.orderHow + '&';
    //   }
    console.log('url: ', url);

    this.immatricolazioniService
      .getImmatricolazioni(url)
      .subscribe((data: any) => {
        this.immatricolazioniArray = data.listaImmatricolazioni;
        this.totaleRecord = data.totaleRecord;
        // console.log('totaleRecord: ', data.totaleRecord);

        // console.log('this collectionSize', this.immatricolazioniArray.length);

        if (this.incremento == false) {
          if (this.page >= 5 && this.page <= 10) {
            this.currentPage = this.currentPage + 1;
            this.incremento = true;
          }
        }

        this.immatricolazioniPerPage = this.immatricolazioniArray.slice(
          //:=========================================
          (this.page - 1) * this.pageSize,
          (this.page - 1) * this.pageSize + this.pageSize
        );

        this.offset = (this.currentPage - 1) * this.itemsPerPage;
        this.limit = this.itemsPerPage;

        // console.log('offset end-> ', this.offset);
        // console.log('limit end-> ', this.limit);
        // console.log('this page: ', this.page);
        // console.log('this currentPage end->: ', this.currentPage);
        console.log('this immatricolazioniArray: ', this.immatricolazioniArray);

        // console.log('this currentPage: ', this.currentPage);
        this.refreshSearch(this.offset, this.limit);
        console.log(
          'immatricolazioniArrayRefresh: ',
          this.immatricolazioniArrayRefresh
        );

        this.immatricolazioniArrayTOT = this.immatricolazioniArray.concat(
          this.immatricolazioniArrayRefresh
        );
      });
  }

  refreshSearch(offset: number, limit: number) {
    let url = 'http://localhost:8080/RestApiMyBatis/webapi/immatricolazioni?';

    console.log('offset refresh-> ', offset);
    console.log('limit refresh-> ', limit);

    if (this.immatricolazioniGetForm.value.targa) {
      url += 'targa=' + this.immatricolazioniGetForm.value.targa + '&';
    }
    if (this.immatricolazioniGetForm.value.idMoto) {
      url += 'idMoto=' + this.immatricolazioniGetForm.value.idMoto + '&';
    }
    if (this.immatricolazioniGetForm.value.dataImmatricolazioneFrom) {
      url +=
        'dataImmatricolazioneFrom=' +
        this.immatricolazioniGetForm.value.dataImmatricolazioneFrom +
        '&';
    }
    if (this.immatricolazioniGetForm.value.dataImmatricolazioneTo) {
      url +=
        'dataImmatricolazioneTo=' +
        this.immatricolazioniGetForm.value.dataImmatricolazioneTo +
        '&';
    }
    if (this.offset != null) {
      url += 'offset=' + offset + '&';
    }
    if (this.limit != null) {
      url += 'limit=' + limit + '&';
    }
    //   if (this.orderBy != null) {
    //     url += 'orderBy=' + this.orderBy + '&';
    //   }
    //   if (this.orderHow != null) {
    //     url += 'orderHow=' + this.orderHow + '&';
    //   }
    console.log('url: ', url);

    this.immatricolazioniService
      .getImmatricolazioni(url)
      .subscribe((data: any) => {
        this.immatricolazioniArrayRefresh = data.listaImmatricolazioni;
        console.log(
          'immatricolazioniArrayTOT: ',
          this.immatricolazioniArrayRefresh
        );
      });
  }

template HTML

<div class="container-fluid">
          <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">
                  Targa
                  <span>
                    <button type="button" class="btn btn-light btn-sm">
                      <span textContent="&#9650;">?</span>
                    </button>
                  </span>
                  <span>
                    <button type="button" class="btn btn-light btn-sm">
                      <span textContent="&#9660;">?</span>
                    </button>
                  </span>
                </th>
                <th scope="col" class="text-end">
                  Id Moto
                  <span>
                    <button type="button" class="btn btn-light btn-sm">
                      <span textContent="&#9650;">?</span>
                    </button>
                  </span>
                  <span>
                    <button type="button" class="btn btn-light btn-sm">
                      <span textContent="&#9660;">?</span>
                    </button>
                  </span>
                </th>
                <th scope="col" class="text-end">
                  Data Immatricolazione
                  <span>
                    <button type="button" class="btn btn-light btn-sm">
                      <span textContent="&#9650;">?</span>
                    </button>
                  </span>
                  <span>
                    <button type="button" class="btn btn-light btn-sm">
                      <span textContent="&#9660;">?</span>
                    </button>
                  </span>
                </th>
                <th scope="col" class="text-end"></th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let element of immatricolazioniPerPage; index as i">
                <td>{{ element.targa }}</td>
                <td class="text-end">
                  {{ element.idMoto }}
                </td>
                <td class="text-end">
                  {{
                    this.datePipe.transform(
                      element.dataImmatricolazione.substring(10, 0),
                      "dd/MM/yyyy"
                    )
                  }}
                </td>
                <td class="text-end">
                  <button
                    type="button"
                    class="btn btn-light me-2"
                    (click)="
                      exportImmatricolazioneToPdf(element.idImmatricolazione)
                    "
                  >
                    Esporta in PDF
                  </button>
                  <button
                    type="button"
                    class="btn btn-outline-secondary me-2"
                    (click)="openEditModal(content3, element)"
                  >
                    Modifica
                  </button>
                  <button
                    type="button"
                    class="btn btn-outline-secondary"
                    (click)="
                      openDeleteModal(content4, element.idImmatricolazione)
                    "
                  >
                    Rimuovi
                  </button>
                </td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="text-end fw-bold">Totali</td>
              </tr>
            </tbody>
          </table>
        </div>