DevExtreme Angular - Server-Side Rendering

Server-side rendering (SSR) generates static pages on the server to reduce the application's loading time.

SSR is used only in Angular Universal applications, but for DevExtreme components, there is no difference between Angular Universal and normal Angular applications.

You can get an Angular Universal application in two ways:

• Run the following command to add the Universal module to a normal Angular application:

  ng generate universal my-app

• Start a Universal application from scratch and add DevExtreme components to it.

This example demonstrates DevExtreme components used in an Angular Universal application with server-side rendering.

When the server caches requests, DevExtreme components are rendered using data applied when the page is loaded for the first time. This decreases the number of requests to the server.

To enable this feature:

1. import the DxServerTransferStateModule in the app.module.ts file:

   app.module.ts

   import { DxServerTransferStateModule } from 'devextreme-angular';
   
   @NgModule({
       // ...
       imports: [
           //  ...
           DxServerTransferStateModule
       ]
   })
   export class AppModule { }

2. import the ServerTransferStateModule in the app.server.module.ts file:

   app.server.module.ts

   import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
   // ...
   @NgModule({
       imports: [
           AppModule,
           ServerModule,
           ServerTransferStateModule,
           ModuleMapLoaderModule
       ],
       bootstrap: [AppComponent],
   })

3. Check that the main.ts file contains the following code to ensure that the AppModule is bootstrapped after the server-side rendered page is loaded:

   main.ts

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