Server side Rendering (SSR) is a modern technique to convert a Single Page Application (SPA) running in the browser into a server based application. Usually, in SPA, the server returns a simple index.html file with the reference to the JavaScript based SPA app. The SPA app take over from there, configure the entire application, process the request and then send the final response.

But in SSR supported application, the server as well do all the necessary configuration and then send the final response to the browser. The browser now just renders the response and start the SPA app

Angular Universal is a technology that allows Angular applications to run on the server. It is a server-side rendering (SSR) module for Angular applications, allowing us to run our Angular app on the server, generating static application pages that later get bootstrapped on the client. This improves the performance of the application, enhances SEO, and provides faster initial page load times.

CSR vs. SSR

In a single-page app (SPA) using client-side rendering, the client application generates HTML within the browser using JavaScript. When the client app sends an initial request, the web server responds with a minimal HTML file to serve as the app container. The browser then proceeds to download and execute the JavaScript bundlers referenced in the HTML file to bootstrap the app.

CSR has a few disadvantages, including:

• Blank page in initial load time: There is a delay before the JavaScript bundle is downloaded and the app is fully bootstrapped. During this time, users may see a blank page, which impact the user experience
• Non-SEO friendly: Webpages relying on CSR mostly contain minimal HTML with links to the JavaScript bundle, so web crawlers may have difficulty in indexing the page content, which may result in reduced visibility in search engine results

SSR, however, addresses both the blank page issue and SEO concerns.

Using SSR, the HTML is generated on the server side, so the generated pages are fully formed and SEO-friendly. It also has a faster load time for the initial request, as the HTML is returned to the browser and displayed before JavaScript bundles are downloaded. Thus, when SEO and initial load time are priorities, SSR is the recommended option.

Applying SSR to an existing Angular app

Assuming we have an existing Angular 16 app, we just need to run the following command to enable server-side rendering:

ng add @nguniversal/express-engine

This command will update our app to add a server-side application for SSR support.

To enable non-destructive hydration, we need to import the provideClientHydration function as the provider of AppModule:

import {provideClientHydration} from '@angular/platform-browser';
// ...

@NgModule({
 // ...
 providers: [ provideClientHydration() ],  // add this line
 bootstrap: [ AppComponent ]
})
export class AppModule {
 // ...
}

If we open package.json, we will find a few new commands were added:

"dev:ssr": "ng run angularSSR:serve-ssr",
"serve:ssr": "node dist/angularSSR/server/main.js",
"build:ssr": "ng build && ng run angularSSR:server",
"prerender": "ng run angularSSR:prerender"

To test server-side rendering in our local, run this command:

npm run dev:ssr

The app is running in SSR mode now!

Below is a comparison diagram to illustrate the difference between destructive and non-destructive hydration: