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.
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:
import the
DxServerTransferStateModule
in theapp.module.ts
file:app.module.tsimport { DxServerTransferStateModule } from 'devextreme-angular'; @NgModule({ // ... imports: [ // ... DxServerTransferStateModule ] }) export class AppModule { }
import the
ServerTransferStateModule
in theapp.server.module.ts
file:app.server.module.tsimport { ServerModule, ServerTransferStateModule } from '@angular/platform-server'; // ... @NgModule({ imports: [ AppModule, ServerModule, ServerTransferStateModule, ModuleMapLoaderModule ], bootstrap: [AppComponent], })
Check that the
main.ts
file contains the following code to ensure that theAppModule
is bootstrapped after the server-side rendered page is loaded:main.tsdocument.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); });
If you have technical questions, please create a support ticket in the DevExpress Support Center.