Dany Paredes
Dany Paredes | Javascript / Web

Dany Paredes | Javascript / Web

My Journey with Angular and SSR

My Journey with Angular and SSR

Dany Paredes's photo
Dany Paredes
·May 26, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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 contrastchecker.com and 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!

Did you find this article valuable?

Support Dany Paredes by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this