mi pregunta es, es bueno hacer esto?
Yo diría que más que buena práctica es por sentido común. Si vas a añadir información a tablas o lo que sea, debe ser cuando el documento ha sido parseado y renderizado.
Como dice @LuisPerez, los frameworks modernos como Vue.js y React recomiendan hacerlo justo antes de que el documento sea renderizado. En el caso de React, en el hook componentDidMount
(función ejecutada automáticamente cuando el componente ha sido montado/renderizado) por lo general se piden los datos por ajax al backend y el componente se re-renderizará. En Vue.js es similar, en el hook created
por lo general se hace ésta tarea.
Por otro lado, si buscas una buena UX, es buena práctica poner una animación de carga mientras se traen los resutados. Ésto es bueno hacerlo en aplicaciones intensivas, con consultas y procesos pesados, para que el usuario "sepa" que hay un trabajo haciéndose y no vea la tabla vacía y se quede con una incertidumbre.
el problema mas grande que noto es que si algún día un nuevo desarrollador ve el código le será un poco más complicado encontrar de dónde está sacando el contenido esos elementos
Si bien es muy menester hacer un código limpio, eficiente y ordenado para los mantenedores, también lo es proveer un patrón de desarrollo bien documentado para consulta del equipo, en donde se mantengan todos los estándares que serán seguidos por los miembros, de ésta manera todos siguen las mismas reglas al desarrollar un módulo. Además, el frontend y el backend siempre deben estar comunicados (hablando de recursos humanos), por lo que, ante cualquier duda sobre arquitectura, etc., se debe consultar con el equipo.