Adding Server-Side Rendering to an Angular Application 🚀

Server-side rendering (SSR) is a technique used to improve the performance and SEO of web applications by rendering the initial HTML of a webpage on the server before sending it to the client. In this tutorial, we will go through the steps to add SSR to an Angular application.

Step 1: Install Angular Universal

Angular Universal is a platform for rendering Angular applications on the server side. To add SSR to an Angular application, we first need to install Angular Universal. You can do this by running the following command in the root directory of your Angular project:

ng add @nguniversal/express-engine

This command will add the necessary dependencies and configurations to your project to enable server-side rendering.

Step 2: Update Angular AppModule

Next, we need to update the AppModule of our Angular application to support SSR. Open the src/app/app.module.ts file and make the following changes:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app' }),
    ServerModule,
    AppModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

In this code snippet, we import the ServerModule from @angular/platform-server and set up the AppServerModule to bootstrap the server-side rendering version of the Angular application.

Step 3: Update main.ts

Next, we need to update the main.ts file in the src directory to support server-side rendering. Open the src/main.ts file and make the following changes:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppServerModule } from './app/app.server.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppServerModule)
  .catch(err => console.error(err));
});

In this code snippet, we import the AppServerModule we created in the previous step and bootstrap it on the server side.

Step 4: Update Angular Universal Configuration

Next, we need to update the Angular Universal configuration to customize the behavior of the server-side rendering. Open the server.ts file in the src directory and make the following changes:

import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { MODULE_MAP } from './server/module-map';

const app = express();

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
  providers: [
    provideModuleMap(MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', 'dist/browser');

app.get('*.*', express.static('dist/browser'));

app.get('*', (req, res) => {
  res.render('index', { req, res });
});

app.listen(4000, () => {
  console.log(`Server running at http://localhost:4000`);
});

In this code snippet, we configure the Express server to use the Angular Universal engine for server-side rendering. We also provide the AppServerModule and MODULE_MAP to the engine for rendering the application. Finally, we set up the server to serve static files and render the Angular application on all routes.

Step 5: Build and Run the Application

Finally, we need to build the Angular application and run the server to see the SSR in action. To build the Angular application with SSR support, run the following command:

ng run my-app:server

This command will build the server-side rendering version of the Angular application. Once the build is completed, you can start the server by running:

node dist/server

Now, open your browser and navigate to http://localhost:4000 to see the server-side rendered version of your Angular application.

Congratulations! You have successfully added SSR to your Angular application. This will improve the performance and SEO of your application by rendering the initial HTML on the server side. Experiment with different configurations and optimizations to further enhance the SSR capabilities of your Angular application.