Prevent Browser Caching of Telerik CSS and JavaScript Files

Environment

Product

UI for Blazor

Description

This KB article answers the following questions:

• How to prevent browser caching issues with the Telerik CSS theme and JSInterop (JavaScript) file when using static assets from the Telerik NuGet packages?
• How to implement a version-dependent cache buster for the all.css and telerik-blazor.js files?
• How to disable the browser cache for Telerik client assets when upgrading the Telerik UI for Blazor components?

Solution

To avoid browser caching issues when upgrading the Telerik UI for Blazor version, consider one of the following options:

• Serve the Telerik CSS and JS files through the so-called Map Static Assets routing endpoint conventions which requires:
  • .NET 9 or later
  • app.MapStaticAssets(); in Program.cs
  • @Assets["..."] in App.razor
• Use the so-called cache busting. Add the components' version number to the Telerik client asset URLs as a query string. In this way, the browser will always load the correct version of the CSS stylesheet and the JSInterop file. Browsers will still use cached Telerik client assets as long as the components version stays the same.

Using the correct client assets avoids Telerik-related JavaScript errors.

Map Static Telerik Assets in .NET 9 or later

RAZOR

<link href="@Assets["_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css"]" rel="stylesheet" />

<script src="@Assets["_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"]"></script>

Cache Busting

Cache busting varies depending on the Blazor application:

• Blazor Web Apps and legacy Blazor Server apps
• Standalone Blazor WebAssembly apps and Hybrid apps

Normally, there is no need for cache busting when using the Telerik CDN, because the client asset URLs are unique for every Telerik UI for Blazor version.

Blazor Web Apps and Legacy Blazor Server Apps

You can use reflection to get the Telerik UI for Blazor version at runtime.

1. Pick a type (class) from the Telerik UI for Blazor product. A good candidate is a component that exists in both old and new product versions, such as the TelerikRootComponent.
2. Get the component type with typeof(TelerikRootComponent). You may need to use typeof(Telerik.Blazor.Components.TelerikRootComponent) if:
   • The Telerik.Blazor.Components namespace is not registered in _Imports.razor as it should.
   • The Telerik CSS and JS assets are placed in a .cshtml file instead of App.razor, for example, in legacy Blazor apps.
3. Use the Assembly.GetName() method and the AssemblyName.Version property to extract the Telerik UI for Blazor version.

Adding a cache buster for the Telerik CSS and JavaScript files through reflection

HTML

@{ var telerikUiForBlazorVersion = typeof(TelerikRootComponent).Assembly.GetName().Version; }

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?@telerikUiForBlazorVersion" rel="stylesheet" />

<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?@telerikUiForBlazorVersion"></script>

Standalone Blazor WebAssembly Apps and Hybrid Apps

If the Telerik CSS theme and JavaScript file reside in the index.html file, you can hard-code the Telerik UI for Blazor version. In this case, it is crucial to update the query string manually every time when upgrading.

Adding a cache buster for the Telerik CSS and JavaScript files in index.html

HTML

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?11.3.0" rel="stylesheet" />

<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?11.3.0"></script>

Notes

You can also use a defer attribute to load the telerik-blazor.js file asynchronously and improve the client-side app performance.

See Also

• Adding the Telerik CSS and JavaScript files to a Blazor app