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