Modelos de ejecución de código
En las arquitecturas web, es esencial comprender cómo se ejecuta el código tanto en el lado del cliente como en el servidor. Esto es crucial para diseñar aplicaciones web dinámicas y eficientes. Este conocimiento permite aprovechar las ventajas de cada modelo, superar sus desafíos y optimizar la interacción entre ambos, logrando así una mayor seguridad y mejorando la experiencia del usuario en general.
En este apartado, analizaremos los diferentes modelos de ejecución de código y cómo interactúan entre sí en el contexto de las arquitecturas web.
¿Qué es el renderizado?
En el contexto web, el renderizado es el proceso de generar y mostrar el contenido de una página web en el navegador del usuario. Este proceso implica tomar el código HTML, CSS y JavaScript que se reciben del servidor y convertirlos en una representación visual interactiva que se muestra en la pantalla. Existen varias formas de renderizar una página web, y cada una tiene sus ventajas y desventajas dependiendo del tipo de aplicación o sitio que se quiera construir.
En términos sencillos, el renderizado es lo que transforma el código en algo que el usuario puede ver y usar. Dependiendo de dónde y cuándo ocurra este proceso, podemos hablar de diferentes tipos de renderizado: renderizado en el cliente, en el servidor, estático o incremental.
Código del lado del cliente (front-end)
El código del lado del cliente se ejecuta directamente en el navegador web del usuario, lo que se conoce como CSR (Client-Side Rendering). En este enfoque, cuando el usuario accede a una página web, el servidor envía principalmente archivos estáticos (HTML, CSS y JavaScript) al navegador. Luego, el navegador es responsable de ejecutar el JavaScript y generar dinámicamente el contenido dentro del navegador mismo.
Este modelo tiene como objetivo mejorar la interacción y la experiencia del usuario, ya que permite que las páginas web respondan más rápidamente después de la carga inicial, sin la necesidad de realizar solicitudes constantes al servidor para cada interacción o cambio de página. Una ventaja importante del CSR es que se reduce la carga en el servidor y las aplicaciones pueden ofrecer experiencias más interactivas y fluidas, al manejar gran parte de la lógica de la interfaz directamente en el cliente. Sin embargo, puede requerir más tiempo para la carga inicial, ya que el JavaScript debe descargarse y ejecutarse para construir la interfaz de usuario completa.
El CSR mejora el rendimiento percibido al ofrecer una respuesta inmediata a las interacciones del usuario. Una vez cargada la página y ejecutado el JavaScript, las transiciones entre secciones ocurren casi al instante, sin esperar nuevas respuestas del servidor. Esto crea la sensación de mayor rapidez y fluidez, ya que no se necesitan recargas completas tras cada acción, lo que mejora significativamente la experiencia del usuario.
Tecnologías principales
Las tecnologías principales que forman la base de cualquier página web y que son interpretadas por los navegadores son las siguientes:
- HTML (HyperText Markup Language): Es el lenguaje de marcado utilizado para definir la estructura y el contenido de una página web. HTML organiza el contenido en elementos como encabezados, párrafos, listas, imágenes, enlaces, etc. Es el "esqueleto" de la página web.
- CSS (Cascading Style Sheets): Es el lenguaje que controla la presentación visual de la página web, es decir, cómo se ve el contenido definido por HTML. CSS se utiliza para estilizar elementos con colores, tipografías, márgenes, posiciones, y cualquier otro aspecto visual. Es lo que da el "diseño" a la web.
- JavaScript: Es un lenguaje de programación que permite agregar interactividad y dinamismo a la página. Con JavaScript, los desarrolladores pueden crear funcionalidades como formularios interactivos, actualizaciones en tiempo real sin recargar la página, animaciones, manejo de eventos del usuario, entre otras. Es el "comportamiento" dinámico de la web.
Código del lado del servidor (back-end)
El código del lado del servidor se ejecuta en el servidor web antes de que la página sea enviada al cliente, lo que se conoce como SSR (Server-Side Rendering). En este modelo, cada solicitud realizada por el cliente genera una nueva versión de la página en el servidor, que luego se envía completamente renderizada al navegador. El servidor es responsable de ejecutar la lógica de negocio, acceder y manipular bases de datos u otros recursos almacenados en el servidor para generar dinámicamente el contenido en función de los datos más recientes. SSR es especialmente útil cuando se requiere que el contenido refleje datos en tiempo real o personalizados.
La lógica de negocio es el conjunto de reglas, procesos y condiciones que determinan cómo funcionan las operaciones y decisiones dentro de una organización o sistema. Se encarga de gestionar y procesar la información relacionada con los objetivos y las necesidades del negocio, asegurando que las acciones y resultados sean coherentes con sus políticas y estrategias.
Por ejemplo, en una tienda online, la lógica de negocio define que si un cliente compra más de 5 productos, recibirá un 10% de descuento. Esta regla controla cómo se aplican los descuentos y asegura que se cumpla esa condición para los pedidos.
Sin embargo, existen otros enfoques que optimizan este proceso dependiendo de las necesidades del proyecto. Por ejemplo, con el modelo de SSG (Static Site Generation), el contenido se genera en el momento de la compilación, no en cada solicitud. Esto significa que las páginas se crean de manera estática y se almacenan en el servidor o en una red de distribución de contenido (CDN), lo que ofrece tiempos de carga extremadamente rápidos, ya que el servidor no tiene que realizar ningún procesamiento dinámico ni acceder a bases de datos en cada petición. SSG es ideal para sitios donde el contenido no cambia frecuentemente y la rapidez es un factor clave, aunque presenta limitaciones en cuanto a la personalización en tiempo real.
Para combinar las ventajas de SSR y SSG, existe el enfoque de ISR (Incremental Static Regeneration). Con ISR, las páginas se generan estáticamente como en SSG, pero pueden ser actualizadas en segundo plano sin necesidad de recompilar todo el sitio. Esto permite tener la velocidad de un sitio estático con la posibilidad de actualizar o regenerar contenido de manera incremental, según sea necesario, sin penalizar el rendimiento en las peticiones del cliente. ISR resulta muy ventajoso para sitios con grandes cantidades de contenido que no necesitan ser actualizados frecuentemente, pero que requieren cierta flexibilidad para reflejar cambios periódicos.
Comparación entre ejecución en cliente y servidor
- Ubicación de la ejecución: Cliente (navegador) vs. servidor.
- Seguridad: El código del servidor es más seguro, ya que no es accesible directamente por el usuario.
- Rendimiento: El código del cliente reduce la carga del servidor, pero depende de las capacidades del dispositivo del usuario.
Interacción entre cliente y servidor en arquitecturas web
La interacción eficiente entre el cliente y el servidor es fundamental en las arquitecturas web para el correcto funcionamiento de las aplicaciones.
Peticiones y respuestas HTTP
- Protocolo HTTP (HyperText Transfer Protocol): Base para la comunicación entre cliente y servidor en la web.
- Peticiones HTTP (HTTP requests): El cliente envía solicitudes al servidor utilizando métodos como GET, POST, PUT, DELETE.
- Respuestas HTTP (HTTP responses): El servidor responde con códigos de estado y contenido, como páginas HTML, datos JSON, entre otros.
Protocolos y estándares de comunicación
- HTTPS (HTTP Secure): Versión segura de HTTP que utiliza cifrado TLS/SSL para proteger la comunicación.
- WebSockets: Protocolo que permite comunicación bidireccional en tiempo real entre cliente y servidor.
- APIs RESTful: Arquitectura que utiliza HTTP para crear servicios web escalables y estandarizados.
TLS/SSL es un protocolo de seguridad que cifra la comunicación entre dos partes para garantizar que los datos transmitidos permanezcan privados e íntegros. La principal ventaja de TLS/SSL es que protege la información sensible durante su transmisión, como contraseñas o datos financieros, asegurando que solo el destinatario autorizado pueda acceder a ella y evitando que los datos sean alterados o interceptados por terceros.
Por ejemplo, cuando accedes a una página web de banca en línea, el uso de TLS/SSL asegura que tu información, como el número de cuenta y las contraseñas, se cifren antes de enviarse, de modo que nadie pueda interceptar o leer esos datos mientras viajan por la red.
Las APIs RESTful son interfaces de programación que siguen los principios de REST (Representational State Transfer), lo que significa que utilizan solicitudes HTTP estándar para acceder y manipular recursos de manera simple y predecible. Las ventajas de las APIs RESTful incluyen su simplicidad, escalabilidad y la facilidad con la que se pueden integrar en sistemas distribuidos, permitiendo que los datos se intercambien de manera eficiente entre diferentes partes.
Por ejemplo, si quieres obtener información sobre un libro de una base de datos, podrías hacer una solicitud GET a una API RESTful con la URL https://api.ejemplo.com/libros/1, donde 1 es el identificador del libro. La API responderá con la información del libro en un formato como JSON.