Co­m­pa­ra­ti­va del server-side rendering, client-side rendering y los static site ge­ne­ra­to­rs

Cada vez que se accede a una página web, el navegador tiene que re­n­de­ri­zar­la para que la pre­se­n­ta­ción sea atractiva y responda al nivel de in­ter­ac­ti­vi­dad deseado. No obstante, el pro­ce­sa­mie­n­to de los scripts dinámicos y del código estático puede rea­li­zar­se de forma muy diferente en función del enfoque de pro­gra­ma­ción del proyecto web. Descubre un análisis de los tres enfoques pri­n­ci­pa­les: el server-side rendering, el client-side rendering y la ge­ne­ra­ción de sitios estáticos.

El server-side rendering (también re­n­de­ri­za­do del lado del servidor, pro­gra­ma­ción del lado del servidor o server side scripting) es una te­c­no­lo­gía que se utiliza en el de­sa­rro­llo de apli­ca­cio­nes web y de páginas web con elementos dinámicos. Se basa en la uti­li­za­ción de scripts que ejecuta el servidor web con ayuda del lenguaje de pro­gra­ma­ción adecuado cuando un cliente solicita el contenido. Ya en la petición inicial se cargan al completo las in­s­tru­c­cio­nes HTML, CSS y Ja­va­S­cri­pt.

Los lenguajes de pro­gra­ma­ción típicos del re­n­de­ri­za­do del lado del servidor son:

• Java
• Ruby
• ASP.NET
• Perl
• PHP
• Python
• Node.js o Ja­va­S­cri­pt

La gran ventaja del SSR es que el servidor carga pre­via­me­n­te las páginas web. La petición del usuario se procesa casi de forma inmediata, lo que le permite acceder con gran rapidez a la página. Este enfoque es muy útil para las webs estáticas. Además, la rapidez de carga de la página tiene una in­flue­n­cia positiva en el po­si­cio­na­mie­n­to en bu­s­ca­do­res, pues gracias al SSR los crawlers pueden rastrear las páginas con mayor facilidad.

El server-side scripting requiere que el servidor entregue páginas HTML pre­ca­r­ga­das con cada solicitud. Si un cliente sigue enviando pe­ti­cio­nes al servidor web para mostrar al usuario in­fo­r­ma­ción nueva y mo­di­fi­ca­da, se produce una so­bre­ca­r­ga de las ca­pa­ci­da­des del servidor. Por ello, el SSR no se re­co­mie­n­da en páginas web con un gran número de pe­ti­cio­nes o que requieren un gran número de in­ter­ac­cio­nes de los usuarios. En estos proyectos, el tiempo de respuesta del servidor web anularía la ventaja de la carga rápida de páginas.

El lenguaje de scripting del lado del cliente más im­po­r­ta­n­te es Ja­va­S­cri­pt.

El CSR es de gran utilidad para proyectos web que cuentan con una gran in­ter­ac­ción con los usuarios. Aunque, en un principio, el proceso de carga es largo (en co­m­pa­ra­ción con otros enfoques), el re­n­de­ri­za­do del resto de páginas es más rápido. La ex­pe­rie­n­cia de usuario es si­g­ni­fi­ca­ti­va­me­n­te mejor que con el re­n­de­ri­za­do del lado del servidor, pues no es necesario que los scripts y co­n­te­ni­dos estén cargados co­m­ple­ta­me­n­te cuando el usuario accede a una nueva página.

Dado que los scripts se ejecutan en el navegador del usuario, este tiene la po­si­bi­li­dad (a di­fe­re­n­cia de los scripts del lado del servidor) de ver el código fuente.

Este enfoque lleva ligado dos problemas im­po­r­ta­n­tes: en primer lugar, a los motores de búsqueda les resulta más difícil encontrar e indexar las páginas. Aunque los crawlers de Google son capaces de hacerlo, el SEO del sitio no se beneficia en este caso (sobre todo porque muchos otros motores de búsqueda a menudo son incapaces de indexar las páginas re­n­de­ri­za­das del lado del cliente).

Por otro lado, el client-side scripting requiere que el navegador soporte Ja­va­S­cri­pt. Aunque suele ser así, los scripts del lado del cliente pueden ser blo­quea­dos por ex­te­n­sio­nes del navegador. Estas ex­te­n­sio­nes se usan para evitar que las ventanas eme­r­ge­n­tes y las he­rra­mie­n­tas de se­gui­mie­n­to, que también se basan en CSR, ra­le­n­ti­cen el tiempo de carga.

Los static site ge­ne­ra­to­rs más conocidos son:

• Jekyll
• Hugo
• Next
• Gatsby
• Gridsome
• Nuxt
• Hexo
• Eleventy
• Jigsaw
• Vuepress

La ge­ne­ra­ción de sitos estáticos es útil para proyectos con un contenido que no suele cambiar como, por ejemplo, una página de inicio personal o un blog. Estos tipos de proyectos web suelen tener poco contenido dinámico y suelen be­ne­fi­ciar­se de una máxima velocidad gracias al pre­rre­n­de­ri­za­do (es decir, la carga previa de la página) con el static site generator. Además, los proyectos con SSG cuentan con pocos puntos de ataque, ya que el potencial de riesgo se limita al clic que realiza el cliente para acceder a la página.

La pre­rre­n­de­ri­za­ción en el contexto de la SSG conlleva también una serie de de­s­ve­n­ta­jas: si el proyecto web está sujeto a cambios regulares (en términos técnicos o de contenido), el enfoque no es práctico. Con cada cambio, las páginas estáticas del proyecto web tienen que “volver” a cargarse. Cuanto mayor es el proyecto, más tiempo se requiere para el proceso de re­co­n­s­tru­c­ción, por lo que la ge­ne­ra­ción de sitios estáticos no se re­co­mie­n­da para aquellas webs con un gran número de su­b­pá­gi­nas estáticas.

El server-side rendering permite que las páginas se carguen de forma excelente, aunque requiere una alta uti­li­za­ción en el servidor web. El client-side rendering funciona en sentido contrario y alivia al servidor, pues renderiza una gran parte de la página en el navegador (para ello el usuario no debe haber bloqueado Ja­va­S­cri­pt). La ge­ne­ra­ción de sitios estáticos reduce la carga tanto al servidor como al cliente y, gracias al enfoque de pre­rre­n­de­ri­za­ción, permite mostrar rá­pi­da­me­n­te el contenido, siempre que no sea in­ter­ac­ti­vo ni cambie co­n­s­ta­n­te­me­n­te.

Estas tres es­tra­te­gias de re­pre­se­n­ta­ción de proyectos web tienen sus ventajas y de­s­ve­n­ta­jas. Para dar con el enfoque que mejor se adapta a tus re­que­ri­mie­n­tos, analiza cui­da­do­sa­me­n­te qué ca­ra­c­te­rí­s­ti­cas be­ne­fi­cian a tu proyecto.