---
title: "Getting Started with Server-Side Rendering in Angular"
date: "2021-05-26"
slug: "getting-started-with-server-side-rendering-in-angular"
author: "Dany Paredes"
canonical: "https://danywalls.com/getting-started-with-server-side-rendering-in-angular"
description: "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..."
---

Last month I set up my [blog](https://www.danywalls.com) 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.

```bash
ng add @nguniversal/express-engine@next
```

The next step was to set up the build for Netlify

```bash
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](https://github.com/angular/universal/blob/master/docs/transfer-http.md) service helps to send information from the server to the client.

```ts
  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.

```typescript
@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!