DevExtreme Angular - Server-Side Rendering

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

Follow the Angular guide on SSR to create Angular project with SSR or add SSR to an existing project.

Then, add DevExtreme components to your application.

To finish DevExtreme SSR configuration, import the DxServerModule in the app.config.server.ts file:

app.config.server.ts
import { DxServerModule } from 'devextreme-angular/server';
// ...
@NgModule({
    imports: [
        // ...
        DxServerModule
    ],
    // ...
})
NOTE
DevExtreme Angular components do not support switching between themes at runtime in the SSR mode. You can only use a single theme.

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 { DxServerModule } from 'devextreme-angular/server';
    import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
    // ...
    @NgModule({
        imports: [
            AppModule,
            DxServerModule,
            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));
    });