Curso de Rendimiento en Angular
Curso de Rendimiento en Angular

Introducción

1

Angular 8 Performace

Analizando el tamaño del Bundle

2

¿Qué es un bundle size? Tree shaking y su importancia

3

Implementando Webpack Bundle Analyzer

4

Moment vs date-fns

5

Aplicando un Performance Budget desde el Angular CLI

Aumenta la velocidad de navegación

6

Code splitting a nivel de rutas

7

Implementando una propia estrategia de precarga

8

Implementando QuicklinkStrategy

9

Usando Machine Learning para predecir rutas

10

Google Analytics y Angular

11

Implementando GuessJs

12

Precarga con Service workers

13

¿Qué es Server Side Render?

14

Implementando Angular Universal

15

Cuidados con SSR y Angular

Rendimiento en tiempo de ejecución

16

¿Qué es el Change Detection?

17

Preparando módulo para Change Detection

18

Analizando el Change Detection

19

Optimización de componentes con OnPush

20

Usando pipes puros

21

subscribe

22

Async

Conclusiones

23

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Curso de Rendimiento en Angular

Curso de Rendimiento en Angular

Nicolas Molina

Nicolas Molina

Cuidados con SSR y Angular

15/23
Recursos

¿Cómo resolver errores al renderizar una aplicación Angular en el servidor y navegador?

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.

¿Qué referencias se pierden al pasar al servidor?

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.

¿Cómo utilizar 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');
    }
  }
}

¿Cómo podemos limpiar la caché y asegurar que el contenido no esté precargado sin actualización?

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.

  1. 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é.

  2. 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.

¿Cómo asegurar la correcta indexación y mejora en rendimiento?

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:

  • El contenido dinámico solo se ejecuta en el navegador cuando es necesario, reduciendo la carga del servidor.
  • Las actualizaciones y pruebas de limpieza de caché aseguran que siempre trabajes con la última versión de tu aplicación.

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

alberto ayala rodriguez

alberto ayala rodriguez

hace 3 años

crazy lo de ssr 👽

Andres Giraldo

Andres Giraldo

hace 5 años

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?

jjorgewill

jjorgewill

hace 5 años

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));
});