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:

NOTE
DevExtreme Angular components do not support switching between themes at runtime in the SSR mode. You can only use a single theme.

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

Cache Requests on the Server

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));
    });