New to Kendo UI for Angular? Start a free 30-day trial

Universal Rendering

The Angular Universal project is used to render Angular applications on the server.


This section provides information on what universal rendering is and how it works.

What Is Universal Rendering

Universal rendering is also called server-side rendering. The most popular scenario for server-side rendering is the initial rendering of your content. Under the hood, the server renders the Angular application and once it is loaded, the client-side application takes over and continues from the rendered state.

For more information, refer to the Angular Universal repository.

Why Use Server-Rendered Content

The reasons to opt for server-side rendered content are:

  • To improve performance—When a static, server-rendered view is displayed to first-time website visitors, user experience hugely improves.
  • To boost search engine optimization (SEO)—While some of the search engines crawl and index dynamic data, many of them still expect plain HTML. By providing static server-rendered content, you ensure that all search engines are able to access your website.

How Does It Work in Angular

With the Angular Universal rendering, the client loads the content as usual and the user immediately sees a fully-rendered view that is included in the server response. The rest of the resources download in the background and once the client is fully bootstrapped, the view continues its lifecycle as a standard single-page application.

What Is the Effect on User Interaction

When the content loads, a 3-5 seconds time-span occurs in which the server-rendered view is shown right away, the user can interact with the interface, but the client-side code is not ready yet. To handle this issue, the Angular team provides the preboot library. The library records events, plays them back, and immediately responds to some of them. It also provides useful options such as persisting the focus when the page is re-rendered and buffering client-side rendering for a smoother transition.

Creating Universally Rendered Applications

Angular Universal was originally built to work with a Node.js backend. The most popular Node.js server-side frameworks use adapters such as Express or Hapi.js. On top of that, Angular Universal also works with ASP.NET Core applications.

This section demonstrates how to create universally rendered applications with the following technologies:

Using Node.js

For a sample project that includes the Kendo UI for Angular components, refer to the node_sample_application GitHub repository. Some of the Kendo UI components depend on the DOM and will not work until the page is re-rendered on the client. The project uses the Angular Universal Starter seed and demonstrates how to use Kendo UI to build applications with Angular Universal.

To run the sample project:

  1. Clone the repository by executing git clone

  2. Enter the project directory by typing cd node_sample_application.

  3. Use NPM to install the dependencies by running npm install.

  4. Start the application and the server by using npm run build:ssr && npm run serve:ssr. The command compiles your project and utilizes Node.js Express to serve your Universal application on http://localhost:4000.

    Alternatively, the npm run build:prerender && npm run serve:prerender command:

    • Compiles your project.
    • Prerenders your application files.
    • Starts an http demo server on http://localhost:8080.

    To load a static site on a static hosting platform, deploy the dist/browser instead of the dist folder.

For development purposes and client-side only rendering, run npm run start which starts ng serve.

Using ASP.NET Core

To utilize Kendo UI for Angular with ASP.NET Core and build universally rendered applications, refer to the article on using .NET Core and Angular.

Useful Resources