Qué hace el navegador y qué hace el servidor

Tu API devuelve doce bytes de JSON. En algún punto entre esos bytes y la persona que sostiene el teléfono hay una pantalla con texto, botones y colores. Frontend es el nombre de ese último tramo del recorrido, y es la parte que se ejecuta en una máquina que no es tuya.

Ya conoces los dos roles de las lecciones de arquitectura. El servidor guarda los datos, decide quién puede leerlos y responde con JSON. El navegador pregunta y después dibuja. Esta lección trata sobre la palabra después: qué pasa realmente dentro del navegador cuando llega la respuesta, y por qué esa parte merece su propio conjunto de ideas.

El navegador guarda la página como un árbol de elementos, llamado DOM. Cada etiqueta se vuelve un nodo, y el anidamiento se vuelve un enlace de padre e hijo. Si ya viste árboles en lógica, es la misma idea: una raíz, ramas y hojas que contienen el texto. Cuando escribes una etiqueta, estás describiendo una forma de ese árbol.

document
  html
    head
      title
    body
      h1
      ul
        li
        li
        liLa página como un árbol: una raíz, ramas y texto en las hojas.

La forma más antigua de actualizar la página es recorrer ese árbol tú mismo. Busca el nodo, crea un elemento nuevo, conéctalo, ponle un texto. Funciona, y para una página con un solo detalle interactivo sigue siendo la respuesta correcta.

const list = document.querySelector("#cart-items");

const row = document.createElement("li");
row.textContent = "Tea";
list.appendChild(row);

document.querySelector("#total").textContent = "12.90";Actualizaciones escritas a mano: crea el elemento, conéctalo, pon el texto, recuerda el total.

Un framework cambia la pregunta. En lugar de instrucciones para el navegador, escribes una descripción de cómo debería verse la pantalla para los datos que tienes. Aquí está esa misma canasta, descrita en vez de ordenada paso a paso.

const cart = ["Bread", "Tea", "Apples"];

function Cart({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

const view = <Cart items={cart} />;

Sé honesto con el intercambio. Un framework es más código, un paso de compilación, otra cosa que aprender y un costo real en el tamaño de lo que envías al teléfono. Lo que compras con él es una regla que se mantiene mientras la página crece: la pantalla se describe a partir de los datos, una sola vez, en un solo lugar. Toda discusión sobre frameworks es en realidad una discusión sobre si ese intercambio vale la pena para este proyecto.