DevExtreme Angular - Server Side Rendering Support (v18.1)

In DevExtreme v17.2, we made the jQuery dependency optional. In that context, we were talking about Server Side Rendering (SSR) for Angular in our blog post. Now we have finished implementing this feature for the DevExtreme v18.1 release, which means that you can use any DevExtreme widget in your Angular Universal (SSR) application. We have prepared an article in our documentation to help you create your own Angular Universal applications with DevExtreme Angular Components, or to add Server-Side Rendering into an existing Angular application.

Transfer State for better performance

Additionally, we have implemented caching of AJAX requests on page loading to make the Server-Side Rendering more effective since data can be loaded from a cache when it is accessed a second time from the client. Caching uses Server Transfer State, so this module must be imported into the server module of your application as described in our documentation. With the caching mechanism in place, client-side components are initialized much faster and display issues due to the swap of server-side and client-side markup are mostly eliminated.

Impressive performance gains

Check out the improved loading speed in our Golf Club demo. We have also prepared a new technical example universal-angular.

Limitations

The Server Side environment has some technical limitations. The most important one is that it is impossible to detect the size of a client window. As a result, the rendering of some widgets is not exactly the same on the server as it would be on a client. For example:

• The Scheduler renders its general container structure, but not the appointments.
• The Form uses the “desktop” layout, which may turn out to be the incorrect one in case the user is on a mobile device.
• The Toolbar renders completely, not taking any adaptivity considerations into account (which determine hidden items based on available space).

The visualization widgets and the PivotGrid will render only a placeholder on the server, with the full rendering taking place on the client.

Overlays, such as Popup, Popover, Toast, Tooltip etc. are not displayed on the server, since this is unnecessary for SSR purposes.

We are interested in your feedback

We don’t intend to stop working on this feature just yet! Please let us know your thoughts and your specific use cases or priorities, and we’ll do our very best to keep moving DevExtreme in the right direction.

Free DevExpress Products - Get Your Copy Today