Angular Universal: Server-side Rendering in Angular Frameworks

31 Jan 20252 minutes to read

Angular is a widely-used client-side web development framework, primarily running on the client-side by default. However, many web applications require server-side capabilities for enhanced SEO and performance. Angular Universal bridges this gap by enabling server-side rendering (SSR) for Angular applications, which can significantly improve SEO, load times, and accessibility when integrated with tools like ASP.NET WebForms and ASP.NET MVC.

This guide explains how to use Angular Universal in conjunction with Syncfusion Angular components to create efficient and performant applications.

What is Angular Universal

Angular Universal is a server-side rendering technology for Angular components that pre-renders HTML on the server and sends it to the client. This ensures quicker time-to-interactive, better SEO, and improved accessibility—especially beneficial for slower networks or devices.

Why use Server-side Rendering

Server-side rendering (SSR) in Angular Universal enhances application performance and user experience. Key benefits include:

  • SEO Improvement: SSR applications have fully rendered HTML on the server, making content easily indexable by search engines and thus improving SEO.
  • Faster Load Times: Users see content sooner with pre-rendered HTML, reducing load times for interactive pages.
  • Better Accessibility: SSR offloads processing to the server, which benefits users with slower devices or limited processing capabilities.

Create an Angular Universal application

Syncfusion Angular UI Components support SSR in Angular Universal applications. Follow these steps to integrate SSR with Syncfusion components:

  1. Set up an Angular Application: Start by creating an Angular application with Syncfusion Angular DataGrid, as outlined in the Getting Started guide using Angular CLI.

  2. Add Server-Side Rendering: Incorporate SSR into your application with the following command:

ng add @nguniversal/express-engine

3.After installing the above command, enable Client Hydration. Hydration is the process that restores the server-side rendered application on the client. To enable hydration, import the provideClientHydration function and add it to the providers section of the app.module.ts file as shown below.

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

@NgModule({
  // ...
  providers: [ provideClientHydration() ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
    // ...
}
  1. Build and Serve the Application: Use the following command to build and serve your application with SSR capabilities:
npm run dev:ssr

View the Angular Universal sample on GitHub

See also