My Journey with Angular and SSR

#angular #codenewbie #javascript

Last month I setup my blog with Angular Universal (Server Side Render) this is about my steps installing SSR in my blog, so keep in mind a simple blog with only text with http request to contentful, so is real scenario, but the simple case to get start with Angular and Server Side render.

Setup SSR

First step is install Angular universal.

ng add @nguniversal/express-engine@next

Next step was set up the build in netlify

npm run build:ssr

Handle Http requests

The page is ready with server side render, but my client application need to request the articles, The TransferState service help to send information from the server to the client.

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

Install it as part of the App module and import into ServerTransferStateModule in server module.

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

Recap

It's done! because my app is only text was easy to get more than 95% but keep in mind the following points.

Not all application are the same, my case is a simple blog, so not issues with images, or authentication.
Use https://contrastchecker.com/ and https://alex-page.github.io/sass-a11ycolor for accesibility issues.
If is your first time, try with an easy project like a blog or small app.
Take care about how to use or transfer data between components, I got an issue to send data using this.location.getState().

Done!