Getting Started with Server-Side Rendering in Angular

Last month I set up my blog with Angular Universal (Server Side Render); this is about my steps in installing SSR in my blog, so keep in mind a simple blog with only text with HTTP requests to contentful, so it is a real scenario, but the simple case to get started with Angular and Server Side to render.

Setup SSR

The first step is to install Angular universal.

ng add @nguniversal/express-engine@next

The next step was to set up the build for Netlify

npm run build:ssr

Handle HTTP requests

The page is ready with server-side render, but my client application needs to request the articles. The TransferState service helps 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 it into ServerTransferStateModule in the 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 applications are the same, and my case is a simple blog, so there are not issues with images or authentication.

• Use https://contrastchecker.com/ and https://alex-page.github.io/sass-a11ycolor for accessibility issues.

• If it is your first time, try an easy project like a blog or small app.

• Take care about how to use or transfer data between components; I got an issue sending data using this.location.getState().

Done!