The Angular Universal project is used to render Angular applications on the server.
This section provides information on:
- What universal rendering is
- Why you need server-rendered content
- How universal rendering works in Angular
- How universal rendering affects user interaction while the content is loading
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.
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.
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.
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.
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:
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:
- Clone the repository by executing
git clone https://github.com/telerik/kendo-angular-universal-demo.git.
- Enter the project directory
- Use NPM to install the dependencies by running
- Start the server by using
npm run serve.
- Navigate to
http://localhost:8000in your browser.
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.
For issues that might be related to your project, refer to the universal-starter repository.
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.