Server Side Rendering en Angular: Builders y Migración

El Server Side Rendering (SSR) en Angular representa una evolución significativa en el desarrollo web moderno, permitiendo mejorar tanto el rendimiento como la visibilidad en motores de búsqueda. Con las recientes actualizaciones, Angular ha optimizado considerablemente esta funcionalidad, implementando técnicas inteligentes basadas en signals que transforman la manera en que nuestras aplicaciones se renderizan y se comportan.

¿Qué son los nuevos builders de Angular y por qué son importantes?

Para aprovechar al máximo las ventajas del Server Side Rendering y otras funcionalidades avanzadas, Angular ha desarrollado nuevos builders que ofrecen diferentes opciones según las necesidades de cada proyecto. Estos builders son fundamentales para determinar cómo se construirá nuestra aplicación.

La documentación oficial de Angular CLI nos presenta cuatro builders principales:

• Application: Es el builder más recomendado y moderno. Permite construir tanto aplicaciones Client Side como Server Side Rendering. Este builder incorpora las innovaciones más recientes en cuanto a SSR y detección de cambios.

• Browser-esbuild: Un builder que genera aplicaciones Client Side, pero no permite implementar Server Side Rendering.

• Browser: Proporciona retrocompatibilidad, especialmente si necesitas mantener integraciones con Webpack.

• Server: Específico para configuraciones de Server Side Rendering.

El builder "application" utiliza esbuild, un transpilador mucho más rápido que Webpack, lo que resulta en tiempos de compilación significativamente reducidos, especialmente en proyectos grandes.

¿Cómo identificar y migrar al builder "application"?

Para determinar qué builder está utilizando tu proyecto actualmente, debes revisar el archivo angular.json. En este archivo podrás ver la configuración del builder que estás usando.

// Ejemplo de configuración con un builder legacy (Webpack)
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    // otras configuraciones
  }
}

La migración hacia el builder "application" se puede realizar de forma automática con un simple comando:

ng generate @angular/core:application

Este comando analiza la configuración actual de tu proyecto y realiza los cambios necesarios en el archivo angular.json, modificando principalmente:

1. El tipo de builder (de "browser" a "application")
2. La ruta de salida (output path)
3. Algunos nombres de archivos (de "main" a "browser")

Cambios importantes al migrar al builder "application"

Cuando migras al builder "application", notarás dos diferencias principales:

1. Mejora en el rendimiento

Al utilizar esbuild en lugar de Webpack, el proceso de compilación se vuelve significativamente más rápido, lo que es especialmente notable en proyectos grandes con muchos servicios y componentes.

2. Cambios en la estructura de carpetas

Este es un cambio crucial que puede afectar tu proceso de despliegue. Después de ejecutar ng build con el nuevo builder, la estructura de carpetas cambia:

Antes (con builder legacy):

dist/
  store/
    index.html
    otros archivos...

Después (con builder "application"):

dist/
  store/
    browser/
      index.html
      otros archivos...

Esta modificación es fundamental porque el archivo index.html ya no se encuentra directamente en la carpeta store, sino dentro de una subcarpeta llamada browser. Esto puede romper tu proceso de despliegue si no se ajusta adecuadamente.

Si tu equipo de DevOps o tus configuraciones de despliegue (en servicios como GitHub Pages, Netlify, Vercel, etc.) están configurados para buscar los archivos en la ruta anterior, deberás actualizarlos para que apunten a la nueva ubicación.

¿Por qué este cambio en la estructura?

Esta nueva estructura anticipa la implementación del Server Side Rendering. Cuando implementes SSR, tendrás dos carpetas principales:

• browser/: Contiene los archivos para renderizado del lado del cliente
• server/: Contendrá los archivos necesarios para el renderizado del lado del servidor

Esta separación clara permite una mejor organización y gestión de los diferentes entornos de renderizado.

Beneficios de utilizar el builder "application"

1. Mayor rendimiento en el proceso de compilación gracias a esbuild
2. Preparación para SSR con una estructura de carpetas optimizada
3. Acceso a las últimas innovaciones de Angular en detección de cambios
4. Soporte para técnicas avanzadas como incremental hydration

La migración al builder "application" es un paso fundamental para modernizar tu aplicación Angular y aprovechar las últimas mejoras en rendimiento y funcionalidad que ofrece el framework.

El Server Side Rendering representa una evolución significativa en cómo construimos aplicaciones web modernas, y con estos nuevos builders, Angular facilita enormemente su implementación. ¿Has experimentado ya con SSR en tus proyectos? ¿Qué beneficios has notado? Comparte tu experiencia en los comentarios.