HTML para el usuario, REST solo cuando hace falta
En tiempos donde todo parece girar en torno a las API REST, es fácil caer en el exceso: cargar todos los datos de un formulario HTML mediante múltiples fetch(), aunque el mismo backend podría entregarlos de una sola vez.
Esta entrada no pretende demonizar REST ni JavaScript, sino promover un uso consciente: mantener el HTML limpio y funcional, y recurrir a fetch o APIs REST solo cuando realmente se necesita.
Principio guía: simple por defecto, dinámico cuando sea necesario
¿Qué se puede renderizar directo en HTML?
- Listas estáticas o semi-estáticas: países, categorías, bancos, etc.
- Datos que ya vienen desde el servidor y no dependen de la interacción del usuario.
¿Cuándo usar fetch tiene sentido?
- Selects encadenados: región → ciudad → comuna.
- Formularios que requieren datos según otra selección.
- Interacción dinámica que mejora la UX (como autocompletar).
Ejemplo híbrido: lo mejor de ambos mundos
<select name="categoria" id="categoria">
<option value="1">Electrónica</option>
<option value="2">Ropa</option>
</select>
<select name="subcategoria" id="subcategoria"></select>
<script>
document.getElementById("categoria").addEventListener("change", function () {
const id = this.value;
fetch(`/api/subcategorias/${id}`)
.then(res => res.json())
.then(data => {
const sub = document.getElementById("subcategoria");
sub.innerHTML = data.map(s => `<option value="${s.id}">${s.nombre}</option>`).join('');
});
});
</script>
En este caso, se evita usar REST para todo, y se reserva solo para lo dinámico.
El backend como puente
Donde REST realmente brilla es en la comunicación entre sistemas: cuando necesitas enviar datos en formato JSON a servicios externos, APIs tributarias, microservicios o validadores.
@PostMapping("/guardar")
public String guardar(FormularioDTO form) {
servicio.guardar(form);
restTemplate.postForEntity("https://api.externa.com/envio", form, Void.class);
return "redirect:/ok";
}
Conclusión
REST y fetch son herramientas poderosas, pero no son la solución para todo. Si tu formulario HTML puede funcionar sin scripts, hazlo. Si necesitas interacción dinámica, usa REST con medida. Y cuando necesites hablar entre sistemas, ahí sí: JSON, REST y todo lo que venga.
Haz que tu HTML haga su trabajo. Y deja el REST para lo que realmente importa.
Comentarios
Publicar un comentario