Mejores prácticas para crear múltiples bloques de HTML dinámicamente.

Para contextualizar: Mi aplicación tiene un programador y quiero mostrar múltiples bloques de citas (digamos un div como hijos de una imagen, texto y un botón), pero esta pregunta también puede ser aplicable, por ejemplo, a catálogos de productos. ¿Cuál es la mejor práctica para construir el contenido HTML para esos bloques?

En mi búsqueda encontré múltiples opciones, por ejemplo (con código pseudo):

Construir línea por línea en jQuery

$('<div>').append($('<img>')).append($('<p>')).append($('<button>'));

Personalmente encontré que esta opción se volvía bastante fea una vez que el bloque tenía más de 3-5 elementos, porque el código comenzaba a abarcar más de una página completa de desplazamiento y se volvía ilegible (pero esto también podría ser debido a mis habilidades de programación deficientes).

Recuperar página HTML mediante Ajax/Cargar

<div>
    <img><p></p><button></button>
</div>

$("target").load("page.php");
o
$.ajax({
   url: "page.php",
   success: function (response) {
      $("target").append(response);
});

La ventaja de esto es que separa el contenido, lo que reduce el tiempo de carga inicial de la página y el contenido se puede construir en el servidor justo antes de que se requiera. El inconveniente es que mi servidor muestra un retraso de aproximadamente 0.1s (en promedio, reproducible) para que las llamadas Ajax regresen (sin casi datos enviados de ida y vuelta). Aunque esto pueda parecer insignificante, todos los pequeños retrasos se suman y pueden afectar la experiencia del usuario.

Clonar plantillas

<template>
   <div>
      <img><p></p><button></button>
   </div>
</template>

const template = document.querySelector("template");
var tgt = document.getElementById("target");
node = document.importNode(template.content, true);
tgt.appendChild(node);

La ventaja de esta opción es que es aproximadamente 10-20 veces más rápida que la primera opción (construir mediante jQuery), pero esto solo será notable después de ~1000 bloques, lo cual excede ampliamente mi caso de uso. El inconveniente es que esto “contamina” el código HTML de la página y de todos modos se requiere el procesamiento del contenido en el objeto a través de JS.

¿Cuáles son otras opciones viables que existen? ¿Y cuál es la mejor práctica para este caso de uso?