Обновление html после отправки ajax-формы

Мне нужен совет, как правильно обновлять html после отправки ajax запроса.
Предположим есть обычная страница с комментариями. На сервере при запросе странице идет запрос в базу на получение всех комментариев. Грубый пример:

$query = mysqli_query($link, "SELECT * FROM Comments WHERE page_id = 2");
if (mysqli_num_rows($query) > 0) {
  while ($data = mysqli_fetch_assoc($query)) {
    $render . = "<div class="comment-row"><h3>{$data['author']}</h3><p>{$data['message']}</p></div>"
  }
  echo $render;
}

Таким образом происходит начальная отрисовка страницы. Есть форма отправки комментария, которая отправляется посредством ajax.

$.ajax({
  url: 'comment.php',
  data: data, //здесь данные из формы собранные с помощью FormData();
  type: 'post',
  contentType: false,
  processData: false,
}).done(function (data){
  ... //делаем что-то с отрисовкой.
});  

На сервере эти данные отлавливаются, данные кладутся в базу и вот вопрос, а как правильно обновлять html после добавления? Самый банальный вариант, просто оставить простую форму без ajax, но хочется динамики.
Вариант 1:
На сервере кладем в базу инфу и после успешной процедуры возвращаем json параметров, которые только что были отправлены формой:
test.php

...
mysqli_query($link, "INSERT INTO Comments (author, message) VALUES ('{$_POST['author']}', '{$_POST['message']}')");
exit(json_encode([$_POST['author'], $_POST['message']]));

клиент

...//ajax
.done(function (data){
  data = JSON.parse(data);
  let firstComment = $('.comment-row:first');
  firstComment.before(`<div class="comment-row"><h3>${data.author}</h3><p>${data.message}</p></div>`);
});

Таким образом мы вроде как не генерируем лишний html код на сервере, а перекладываем все это дело на клиента освобождая сервер.
Вариант 2:
Примерно тоже самое, но вместо отдачи json мы отдаем готовый html нового поста с комментом.
test.php

...
$data = "<div class="comment-row"><h3>{$_POST['author']}</h3><p>{$_POST['messge']}</p></div>";
exit($data);

Клиент

...
.done(function (data){
  $('.comment-row:first').before(data);
});

Вариант 3:
Не паримся и просто запрашиваем все комменты из бд и отдаем их целиком:
test.php

... //выбираем из бд все комменты после вставки нового
$comments = '';
while ($data = mysqli_fetch_assoc($query)) {
  $comments .= "<div class=\"comment-row\"><h3>{$data['author']}</h3><p>{$data['message']}</p></div>"
}
exit($comments);  

Клиент

...
$('#container-comments').html(data);  

Вариант 4
Совершенно не паримся и просто перезагружаем страницу. После перезагрузки изначальным скриптом мы получим все комменты, однако зачем тогда вообще ajax?

Собственно какой вариант сейчас применяется и является наиболее правильным? Возможно я что-то упускаю и есть более лучшее решение?
Весь код написан сугубо для примера и общей наглядности, поэтому в нем нет никаких проверок входящих данных на SQL-инъекции и другие уязвимости в пользу краткости изложения примера.

UPD: Проект в рамках которого задается вопрос, представляет собой подобие соцсети, с возможностью размещения объявлений, создания групп (подобие групп ВК), наличием профиля пользователя с включенным в него возможностью создания фотоальбомов, хранилища документов и возможностью обмениваться личными сообщениями между зарегистрированными участниками. (Относительно вопроса про комменты - комменты можно оставлять в объявлениях, группах и других подобных фукнционалах проекта, при чем к комментам предполагается прикрепление фото или документов. Исходя из этого помимо комментов с ajax отправкой формы, точно также может быть реализованы добавление новых объявлений/групп/записей/сообщений).