Server-Side Rendering
Server-Side Rendering, also called Universal Rendering, is used to render Angular applications on the server.
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 loaded, the client-side application takes over and continues from the rendered state.
For more information, refer to the Angular Universal repository. Starting from v17 of the framework, the Universal repository has been merged into the Angular CLI repo.
Advantages of Server-Side 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.
Workflow 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.
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. With the latest versions of the framework, the Angular team introduced native approaches for handling this issue.
For earlier versions, 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. Since the library is redundant with the latest Angular versions, its repository has been archived and is no longer maintained.
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 has been created by following the steps in the Enable server-side rendering article 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 Angular CLI 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.