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 DxServerModule in the app.module.server.ts file:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { DxServerModule } from 'devextreme-angular/server';

@NgModule({
    imports: [
        AppModule,
        ServerModule,
        DxServerModule
    ],
    bootstrap: [AppComponent],
})
export class AppServerModule {}

If you use standalone components, import DxServerModule in the app.config.server.ts file:

import { mergeApplicationConfig, ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { DxServerModule } from 'devextreme-angular/server';

import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
    providers: [
        provideServerRendering(), importProvidersFrom(DxServerModule)
    ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

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