crazy lo de ssr 👽
Introducción
Angular 8 Performace
Analizando el tamaño del Bundle
¿Qué es un bundle size? Tree shaking y su importancia
Implementando Webpack Bundle Analyzer
Moment vs date-fns
Aplicando un Performance Budget desde el Angular CLI
Aumenta la velocidad de navegación
Code splitting a nivel de rutas
Implementando una propia estrategia de precarga
Implementando QuicklinkStrategy
Usando Machine Learning para predecir rutas
Google Analytics y Angular
Implementando GuessJs
Precarga con Service workers
¿Qué es Server Side Render?
Implementando Angular Universal
Cuidados con SSR y Angular
Rendimiento en tiempo de ejecución
¿Qué es el Change Detection?
Preparando módulo para Change Detection
Analizando el Change Detection
Optimización de componentes con OnPush
Usando pipes puros
subscribe
Async
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Al trabajar con aplicaciones Angular, es común enfrentar errores al realizar el renderizado desde el servidor y el navegador. Esto se debe a las diferencias entre las capacidades y referencias disponibles en cada entorno. Aquà te mostramos cómo manejar estas diferencias de manera efectiva.
Cuando tu aplicación Angular está configurada para renderizar desde el servidor (SSR), algunas referencias y funciones especÃficas del navegador, como window
, document
o API de geolocalización, no están disponibles de la misma manera. Esto puede llevar a errores si el código intenta acceder a ellas directamente. Angular proporciona herramientas para diferenciar dónde se ejecuta el código, ya sea en el servidor o en el navegador.
isPlatformBrowser
e isPlatformServer
para solucionar problemas de renderizado?Para determinar el entorno en el que se está ejecutando tu aplicación y adaptar el comportamiento en consecuencia, Angular ofrece dos métodos muy útiles:
isPlatformBrowser
: Identifica si el código se está ejecutando en el navegador.isPlatformServer
: Verifica si el código se está ejecutando en el servidor.Ejemplo de implementación:
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
export class AppComponent {
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
if (isPlatformBrowser(this.platformId)) {
console.log('Este código se ejecuta solo en el navegador');
}
if (isPlatformServer(this.platformId)) {
console.log('Este código se ejecuta solo en el servidor');
}
}
}
Manos a la obra. A menudo, durante el desarrollo y pruebas de aplicaciones Angular, la caché del navegador puede causar que veas contenido desactualizado. Limpiarla es vital para asegurar que estás viendo la versión más reciente de tu aplicación.
Limpieza manual de la caché: Accede a las herramientas de desarrollo del navegador, dirÃgete a la sección de aplicación o almacenamiento y borra toda la caché.
Desactivación puntual de la caché: Esto se puede hacer directamente desde las opciones de las herramientas de desarrollo para asegurarte de que el navegador no utilice versiones almacenadas temporalmente de tus archivos.
Utilizando técnicas de renderizado del lado del servidor (SSR) con Angular, no solo mejoras la experiencia del usuario al proporcionar contenido más rápido, sino que también optimizas tu aplicación para los motores de búsqueda, maximizando la visibilidad en la web. Mantén tu aplicación en óptimas condiciones asegurándote de que:
Estos ajustes y técnicas no solo mejorarán el rendimiento de tu aplicación, sino que también maximizarán su visibilidad en los motores de búsqueda, llevándola a un nuevo nivel en el entorno digital. ¡Continúa aplicando estos conceptos y verás grandes mejoras en tu desarrollo con Angular!
Aportes 3
Preguntas 9
crazy lo de ssr 👽
Nico, excelente clase pero me quedo una duda, dices que al ejecutar los comandos de SSR serve:ssr, build:ssr se levanta un servidor NODEJS en el puerto 4000, como seria entonces el proceso para llevar una aplicación con SSR a producción? cambiarÃa algo o seria igual?
Una consulta cuando ejecuto npm run build:ssr && npm run serve:ssr me sale el siguiente error
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ERROR ReferenceError: window is not defined
y en ese fichero main.ts lo que hay es
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
});
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?