Telerik UI for Blazor CDN
The Telerik Blazor CDN is a complimentary service that can be used in development and production environments. This article describes the CDN URLs and what to keep in mind when using CDN in general.
The CDN hosts two kinds of static client assets for the Telerik UI for Blazor components:
CSS Theme URLs
The CDN hosts swatches of the popular built-in CSS themes. The file URLs look like this:
blazor.cdn.telerik.com/blazor/<COMPONENT-VERSION>/kendo-theme-<THEME-NAME>/swatches/<THEME-NAME>-<SWATCH-NAME>.css
The separate font icons stylesheet URL looks like this:
blazor.cdn.telerik.com/blazor/<COMPONENT-VERSION>/kendo-font-icons/font-icons.css
Here are a few examples:
Telerik UI for Blazor CDN URLs for CSS themes
<!-- Ocean Blue swatch of the Default theme -->
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/6.0.2/kendo-theme-default/swatches/default-ocean-blue.css" />
<!-- Main swatch of the Bootstrap theme -->
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/6.0.2/kendo-theme-bootstrap/swatches/bootstrap-main.css" />
<!-- Font icon stylesheet -->
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/6.0.2/kendo-font-icons/font-icons.css" />
JavaScript URLs
The CDN hosts the JavaScript (JSInterop) file of Telerik UI for Blazor. The file URL looks like this:
blazor.cdn.telerik.com/blazor/<COMPONENT-VERSION>/telerik-blazor.min.js
Telerik UI for Blazor CDN URL for JavaScript
<script src="https://blazor.cdn.telerik.com/blazor/6.0.2/telerik-blazor.min.js"></script>
Pros and Cons of Using CDN
The benefits of using a CDN in Blazor apps are:
- Possible performance gains in the application loading time. Blazor apps are single page applications and browsers rely on cache by default, so this benefit is marginal and relates only to users that open the application for the first time.
- Avoidance of browser caching issues after component version upgrades. The CSS and JS files change with every component version, and so do the CDN URLs. This URL change guarantees that browsers will reload the static assets.
The drawbacks of using a CDN are:
- Additional component version upgrade steps. You must change the version number in the URL, otherwise the application can display broken UI or throw JavaScript errors.
- A CDN is a critical external dependency for your app. Regardless of the claimed uptime, you must implement a CDN fallback for cases when the CDN is not accessible to your users due to geographical, networking or system issues.