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