All Components

Universal Rendering

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

Overview

This section provides information on:

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.

Depending on the logic of your project, you can create universally rendered applications by:

Using Node.js

For a sample project that includes the Kendo UI for Angular components, refer to node_sample_application on GitHub. Note that 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 ng-seed/universal 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 https://github.com/telerik/kendo-angular-universal-demo.git.
  2. Enter the project directory cd node_sample_application.
  3. Use NPM to install the dependencies by running npm install.
  4. Start the server by using npm run serve.
  5. Navigate to http://localhost:8000 in your browser.

Using ASP.NET Core

For more information on how to utilize Kendo UI for Angular with ASP.NET Core and build universally rendered applications, refer to the article on using .Net Core in the Angular context.

Useful Resources

For issues that might be related to your project, refer to the universal-starter repository.

For questions about Kendo UI for Angular, browse the StackOverflow kendo-ui-angular2 tag or the frequently asked question (FAQ).

Kendo UI for Angular uses GitHub issues as official bug trackers. To report a bug or share your feedback, submit a GitHub issue to the telerik/kendo-angular repository.

In this article