Renderización en el servidor vs renderización en el cliente: La pelea del siglo en el desarrollo web

Hoy me voy a poner un pelín técnica para explicar esto del server side rendering y la diferencia con el client side rendering.

¿Alguna vez te has preguntado cómo es que las páginas web se ven tan bien y responden tan rápido? Bueno, hay un par de formas en las que los desarrolladores y desarrolladoras hacemos magia y se llaman Server Side Rendering (SSR) y Client Side Rendering (CSR).

¿Suena a chino? No te preocupes, te lo explicaré con ejemplos simples y usando un amigo muy conocido: WordPress.

La polarización en el desarrollo web

En este mundo nos encanta llevarnos la contraria, y a veces, es tan simple como tener varias opciones y elegir la que más nos conviene.

El renderizado en un proyecto web es muy importante sobre todo para el rendimiento de nuestro proyecto, apostar por las buenas prácticas en desarrollo web es casi obligatorio, pero este tipo de renderizados a veces pasan desapercibidos.

Server Side Rendering (SSR)

Imagina que estás en una pizzería (¡qué rico!), y decides pedir una pizza hawaiana (sí, con piña). Cuando haces tu pedido, el chef va a la cocina, prepara la pizza y te la sirve directamente en tu mesa. En el mundo web, esto sería como cuando visitas un sitio hecho con SSR. El servidor (el chef) prepara toda la página (la pizza) y te la sirve lista para disfrutar.

Un ejemplo de esto es cuando visitas un blog en WordPress. Cada vez que accedes a una página, el servidor genera el HTML completo y te lo muestra.

Client Side Rendering (CSR)

Ahora, imagina que estás en una pizzería diferente. Esta vez, cuando ordenas tu pizza, el chef te da una masa y los ingredientes básicos, y te dice: «¡Hazla tú mismo!». Así es como funciona el CSR en el mundo web.

Cuando visitas un sitio hecho con CSR, como una aplicación de una sola página (SPA) en WordPress, el servidor te da un esqueleto básico de HTML y luego tu navegador (tú mismo) se encarga de agregar los toppings (contenido dinámico) usando JavaScript.

¿Cuál es mejor?

Bueno, depende de lo que estés buscando. Si quieres una experiencia rápida y lista para disfrutar desde el principio, el SSR es tu mejor opción. Pero si prefieres una experiencia más interactiva y personalizada, el CSR puede ser la forma de ir.

Ejemplos de WordPress:

Para que todo esto tenga sentido, veamos algunos ejemplos prácticos utilizando WordPress, ya que soy una pesada con este CMS:

  • Server Side Rendering: Cuando visitas la página de inicio de un blog en WordPress, el servidor genera el HTML completo de la página, incluyendo los últimos artículos, la barra lateral con widgets y todo lo demás. Tú recibes todo esto de una vez y puedes comenzar a leer de inmediato.
  • Client Side Rendering: Ahora, imagina que estás en un sitio web de comercio electrónico construido con WordPress y WooCommerce. Cuando navegas por las diferentes categorías de productos, el servidor te muestra el esqueleto básico de la página con los productos más populares. Luego, cuando haces clic en un producto específico, tu navegador carga más información sobre ese producto utilizando JavaScript, sin necesidad de recargar toda la página.

Conclusión

En el mundo del desarrollo web, tanto SSR como CSR tienen su cometido. Depende de ti y de tus necesidades decidir cuál es la mejor opción para tu proyecto.

Aunque yo te diga que para mi proyecto es mejor uno, no te lo creas, porque cada proyecto es único y tiene su necesidades.

Una de las bondades de WordPress y el desarrollo web, es que puedes extenderlo y usarlo como tu prefieras.

Otros post que te podrían interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Marta Torre Ajo.
Finalidad: Los datos que te pido son los mínimos necesarios para poder responder a las consultas que realices.
Legitimación: Aceptación expresa de la política de privacidad.
Destinatarios: No cederé nunca tus datos a terceros, salvo obligación legal.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Información adicional: Puedes consultar la información detallada en este enlace.