Universal Rendering
The Angular Universal project is used to render Angular applications on the server.
Overview
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:
- Node.js, or
- ASP.NET Core.
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:
-
Clone the repository by executing
git clone https://github.com/telerik/kendo-angular-universal-demo.git. -
Enter the project directory by typing
cd node_sample_application. -
Use NPM to install the dependencies by running
npm install. -
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 onhttp://localhost:4000.Alternatively, the
npm run build:prerender && npm run serve:prerendercommand:- Compiles your project.
- Prerenders your application files.
- Starts an
httpdemo server onhttp://localhost:8080.
To load a static site on a static hosting platform, deploy the
dist/browserinstead of thedistfolder.
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
- 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-angular2tag 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.
