WebApp Design: un modo migliore di aggiornare le informazioni in un elemento DOM

Sfondo:
Stavo lavorando a un progetto personale per creare un'app Web Checklist delle attività. Ho lavorato sul codice con vanilla golang e javascript. È un'app molto semplice con funzionalità limitate. Ho usato un json-rpc come endpoint per l'applicazione.

Codice e implementazioni:
Endpoint:

/getTsk GET
/addTsk POST
/delTsk POST

Implementazione HTML del div aggiornato ajax:

<!-- Pending task loads here -->
<!-- On reload, everything in this div is deleted -->
<!-- The tasks div are then added into this div -->
<div id="pendingTasks"></div>

Codice Ajax Javascript per aggiungere una nuova attività:

function saveTasks(value) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (request.readyState == request.DONE) {
        if (request.status === 200) {
            reloadPending(); //If sucessfully added task, then reload the corresponding div
            showAlert("New Task Added.", "alert-success");
        } else {
            showAlert("Failed to Add New Task, Please try again later.", "alert-danger");
        }
    }
};
request.open("POST", ep_prefix + "/addTsk");
request.setRequestHeader("Content-type", "application/json");
request.send(JSON.stringify({ description: value }));
}

Ajax Javascript per ricaricare il div dopo l'aggiunta del task con successo:

function reloadPending() {
let content = document.getElementById("pendingTasks");
content.innerHTML = "";

makeGetRequest("GET", "/getTsks", initPending, showEmptyPending, "?status=0"); //Get all the task from backend again
}

Popolazione di elementi dell'attività in div:

//Population of the entries
let fragment = document.createDocumentFragment();
console.log(tasks.length);
for (let i = 0; i < tasks.length; i++) {
    console.log(tasks[i]);
    let taskElements = createTask(tasks[i], "pending");
    fragment.appendChild(taskElements);
}
document.getElementById("pendingTasks").appendChild(fragment);

Problema:
Ho implementato la mia app in modo tale che, quando una richiesta di posta viene inviata agli endpoint, restituirà solo un codice di successo (http 200) e dovrò fare un'altra richiesta ajax per ottenere i dati dal back-end e aggiorna l'elemento DOM, che causa sfarfallio e non è fluido e anche non pratico, considerando che se ho 100 elementi ho bisogno di recuperare tutti questi elementi solo per aggiungere un elemento.

Domanda:
Come dovrei progettare gli endpoint o la mia applicazione web in modo tale che l'aggiunta di una nuova attività non richieda un ricaricamento completo (recupero di tutte le attività dal back-end) e aggiornamento del div?

Grazie.