La renderización de HTML es el proceso de insertar datos en archivos de plantillas para generar una página HTML completamente renderizada que se puede ver en un navegador web.

Si planeas trabajar en el ecosistema de JavaScript/TypeScript, hay una opción estándar: TSX. TSX es un formato de archivo que combina tanto código JavaScript/TypeScript como una sintaxis similar a XML. La mayoría de los marcos populares, como React (y Next.js en consecuencia), utilizan este sistema de plantillas.

⭐ Astro

---
const { heroImage, lang } = Astro.props
---
<Header lang={lang} />
<main>
  <article class="layout-content mb-8">
    <div class="content-full w-100">
      {heroImage && (<Image
         class="block mx-auto shadow-lg w-full max-h-[40vh]"
         height={510}
         src={heroImage}
         alt=""/>) }
     </div>
  </article>
</main>

Mi elección predeterminada. Astro es un Meta-Framework versátil que te permite producir páginas estáticas y renderizadas en el lado del servidor, integrando muchos sistemas diferentes. Puedes utilizar contenido de muchas fuentes de datos y renderizar el contenido con muchos marcos de componentes, como React, Svelte, y las propias plantillas de Astro. La función Astro Islands también permite la renderización en el lado del cliente, lo que habilita la interactividad dinámica en el lado del cliente.

Next.js

export default function Page() {
  async function create(formData: FormData) {
    "use server";
    const id = await createItem(formData);
  }


  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Next.js es el framework más potente para React. Incluye muchas características de última generación que pueden ayudar a acelerar casos de uso importantes para grandes empresas, como acciones en el servidor y transmisión de renderizado de componentes.

Otras Opciones

Go Templ

package main


templ personTemplate(p person, emails []string) {
  <div>
    <h1>{ p.name }</h1>
    <p class="font-base">
      {! email(p.email) }
    </p>
    for _, email := range emails {
      <p>{ email }</p>
    }
  </div>
}

El lenguaje de plantillas de Go, templ, está recibiendo mucha atención en estos días.

Django Templates

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

Si estás trabajando en un entorno de Python, las plantillas de Django podrían ser adecuadas para ti.