Primeros pasos con Server-Side Rendering en Angular

El mes pasado configuré mi blog con Angular Universal (Server Side Render). En este post comparto los pasos que seguí para instalar SSR en mi blog. Ten en cuenta que se trata de un blog sencillo, únicamente con texto y peticiones HTTP a Contentful. Es un escenario real, pero representa el caso más simple para empezar con Server-Side Rendering en Angular.

Configurar SSR

El primer paso es instalar Angular Universal.

ng add @nguniversal/express-engine@next

El siguiente paso fue configurar el build para Netlify:

npm run build:ssr

Manejar peticiones HTTP

La página ya está lista con renderizado del lado del servidor, pero mi aplicación cliente necesita solicitar los artículos. El servicio TransferState ayuda a enviar información desde el servidor hacia el cliente.

  imports: [
    BlogHeaderModule,
    BrowserModule,
    InfrastructureModule,
    AppRoutingModule,
    BrowserModule.withServerTransition({ appId: 'dw' }),
    TransferHttpCacheModule
  ],

Instálalo como parte del App module e impórtalo en ServerTransferStateModule dentro del módulo del servidor.

@NgModule({
  imports: [AppModule, ServerModule, ServerTransferStateModule],
  bootstrap: [AppComponent],
})

Resumen

¡Listo! Como mi aplicación solo contiene texto, fue fácil alcanzar más del 95% de rendimiento, pero ten en cuenta los siguientes puntos:

• No todas las aplicaciones son iguales. Mi caso es un blog simple, por lo que no hay problemas con imágenes ni autenticación.

• Usa https://contrastchecker.com/ y https://alex-page.github.io/sass-a11ycolor para revisar problemas de accesibilidad.

• Si es tu primera vez, prueba primero con un proyecto sencillo como un blog o una aplicación pequeña.

• Ten cuidado con la forma de usar o transferir datos entre componentes. Yo tuve un problema al enviar datos usando this.location.getState().

¡Listo!