Contenido dinámico universal de Angular
Así que… El pre-renderizado es tanto SSR como SSG. Angular Universal puede hacer SSR y SSG. Scully sólo puede hacer SSG. Pero, Scully es mucho más fácil de mantener e implementar que Angular Universal. Es mucho más fácil de soportar en producción que Angular Universal. En última instancia, funcionará en Angular, AngularJS, React, Vue, Ember y otros proyectos. Pero… SSR nunca soportará todo eso al mismo tiempo (cosa que sí podría hacer Scully).
Es genial para lo que hace. Pero si no quieres enviar un cluster entero de servidores universales de nodos a producción… entonces deberías usar Scully. Será sistemáticamente más barato de construir y mantener.
Compara la velocidad de SSR con la de Pre-Rendering. SSR es indefectiblemente más lento, sin posibilidad de competir con la velocidad de Pre-rendering. Con el pre-renderizado, se despliega todo el contenido generado en una CDN. Las CDNs son rápidas (como… locamente rápidas). Así que cuando alguien quiere algo tuyo, lo obtiene de la CDN. Con SSR, para obtener algo tuyo, tienen que viajar desde donde sea que estén hasta tu servidor, y obtener el contenido enviado de vuelta a ellos. La CDN siempre será más rápida que la SSR.
Prerrenderización
La tecnología tiene una forma de aumentar las expectativas. Con cada avance en el desarrollo de software, siempre parece haber otro que se basa en la mejora anterior. Tomemos el ejemplo de las aplicaciones de una sola página (SPA). Pero cuando las SPA se visualizan en los navegadores web, los usuarios no ven nada más que una pantalla en blanco hasta que se descargan y se juntan todo el marco y el código de la aplicación. Una solución a esos problemas surgió en forma de Angular Universal Server-Side Rendering (SSR), que hace que la página parezca cargarse más rápido.¿Por qué usar Angular Universal? La mejora del rendimiento es realmente una cuestión de percepción. Angular Universal envía la información rápidamente pero por etapas, lo que permite al usuario recibir una vista renderizada de la página más rápidamente. Angular cree que mostrar la primera página rápidamente es fundamental para el compromiso del usuario. Aproximadamente el 53% de las visitas a sitios móviles se abandonan si las páginas tardan más de tres segundos en cargarse.
Rutas dinámicas de prerrenderización de Angular
Para entender lo que esto significa, recordemos que en una aplicación normal de una sola página, normalmente llevamos los datos al cliente y luego construimos el HTML que representa esos datos en el último segundo en el lado del cliente.
Pero en ciertas situaciones y por buenas razones, es posible que queramos en cambio hacer ese renderizado antes de tiempo, por ejemplo en el servidor o en el momento de construir la aplicación: y eso es exactamente lo que Angular Universal nos permite hacer.
Cuando usamos Angular Universal, renderizamos el HTML y CSS inicial que se muestra al usuario antes de tiempo. Podemos hacerlo, por ejemplo, en tiempo de compilación, o sobre la marcha en el servidor cuando el usuario solicita la página.
Esta aplicación cliente de Angular se encargará entonces de la página, y a partir de ahí todo funcionará como una aplicación normal de una sola página, lo que significa que todo el renderizado en tiempo de ejecución ocurrirá directamente en el cliente como es habitual.
Como sabemos, una página única cuando se carga inicialmente es esencialmente un archivo index.html vacío con casi nada de HTML. Esto significa que cuando este archivo HTML es renderizado inicialmente por el navegador, todo lo que el usuario verá es una pantalla completamente en blanco.
Angular ssr vs react ssr
Angular v9 y Universal: SSR y prerendering out of the box¡Publicado el domingo, 5 de enero de 2020Angular Universal – Serie de técnicas avanzadasEste artículo es parte de una serie creciente en torno a las técnicas avanzadas en Angular con Universal. Este artículo y la guía están pensados para ayudar a cualquier persona que utilice Angular v9 y se inicie en el server-side-rendering (SSR) y el prerendering de su aplicación. Por favor, ten en cuenta que estas instrucciones sólo funcionan para aplicaciones nuevas o actualizadas que utilicen Angular v9. Obtener el mismo resultado para Angular v2-v8 requiere más y una configuración personalizada.Proyecto de ejemploPara el proyecto de ejemplo estamos utilizando un proyecto mínimo generado por Angular-cli con el enrutamiento habilitado. También se ha generado una ruta home (/) y about (/acerca de) y sus componentes. Utilizando un módulo de noticias cargado de forma perezosa, también se configuró una ruta dinámica adicional (/noticias) y una ruta de detalle de noticias (/noticias/:id).Los datos para esta página de resumen y detalle son un simple objeto de datos JSON que cargamos desde la carpeta de activos estáticos (/activos/noticias.json) y tiene el siguiente aspecto:/activos/noticias.json[
