Skip to content

Commit 173a049

Browse files
github-actions[bot]dimodiyordan-mitev
authored
Merge caching-net9-3175 into production (#3177)
* kb(Common): Add .NET 9 information to cache busting documentation * Update knowledge-base/common-browser-cache-buster.md Co-authored-by: Yordan <[email protected]> --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Yordan <[email protected]>
1 parent 3a45b10 commit 173a049

File tree

2 files changed

+27
-20
lines changed

2 files changed

+27
-20
lines changed

‎getting-started/what-you-need.md

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,7 @@ There are a few other optional namespaces that may be needed often. You can impo
9595

9696
>caption _Imports.razor
9797
98-
<div class="skip-repl"></div>
99-
100-
````RAZOR
98+
````RAZOR.skip-repl
10199
@* required *@
102100
@using Telerik.Blazor // set component parameters
103101
@using Telerik.Blazor.Components // recognize components tags
@@ -113,9 +111,7 @@ To avoid the need to register Telerik namespaces in `.cs` files, use [`global us
113111

114112
>caption Program.cs or MauiProgram.cs
115113
116-
<div class="skip-repl"></div>
117-
118-
````CS
114+
````C#.skip-repl
119115
// required
120116
global using Telerik.Blazor; // use component parameter values
121117
global using Telerik.Blazor.Components; // use component types and instances
@@ -138,9 +134,7 @@ Register the Telerik service in all projects that use Telerik Blazor components.
138134

139135
>caption Program.cs or MauiProgram.cs
140136
141-
<div class="skip-repl"></div>
142-
143-
````CS
137+
````C#.skip-repl
144138
builder.Services.AddTelerikBlazor();
145139
````
146140

@@ -151,9 +145,10 @@ builder.Services.AddTelerikBlazor();
151145

152146
The Telerik UI for Blazor components require a [theme stylesheet](#css-theme) and a [JSInterop file](#javascript-file).
153147

154-
To use static CSS and JS assets from the NuGet package in a project, make sure that the project has [`app.UseStaticFiles();` in its `Program.cs`](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-8.0&tabs=visual-studio#consume-content-from-a-referenced-rcl) file. This is true by default.
148+
To use static CSS and JS assets from the NuGet package in a project, make sure that the [project allows it](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files), which is true by default. To [prevent browser caching of the Telerik static NuGet assets during version upgrades](slug:common-kb-browser-cache-buster):
155149

156-
You can also [add the Telerik UI for Blazor version number to the CSS and JavaScript file URLs to prevent browser caching during version upgrades](slug:common-kb-browser-cache-buster).
150+
* In .NET 9 and later versions, you can use `MapStaticAssets()` in `Program.cs` and `@Assets["..."]` in `App.razor`.
151+
* Add the Telerik UI for Blazor version number to the CSS and JavaScript file URLs.
157152

158153
### CSS Theme
159154

@@ -163,9 +158,7 @@ Register the [Telerik font icon stylesheet](slug:common-features-icons#font-icon
163158

164159
>caption Adding the Telerik Blazor CSS files
165160
166-
<div class="skip-repl"></div>
167-
168-
````HTML
161+
````HTML.skip-repl
169162
<head>
170163
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
171164
@@ -191,9 +184,7 @@ The recommended way to register the Telerik Blazor JS file for better loading pe
191184

192185
>caption Adding the Telerik Blazor JavaScript file
193186
194-
<div class="skip-repl"></div>
195-
196-
````HTML
187+
````HTML.skip-repl
197188
<!DOCTYPE html>
198189
<html>
199190
<head>

‎knowledge-base/common-browser-cache-buster.md

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,27 @@ This KB article answers the following questions:
3131

3232
## Solution
3333

34-
To avoid browser caching issues when upgrading the Telerik UI for Blazor version, 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.
34+
To avoid browser caching issues when upgrading the Telerik UI for Blazor version, consider one of the following options:
35+
36+
* Serve the Telerik CSS and JS files through the so-called [Map Static Assets routing endpoint conventions](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/map-static-files) which requires:
37+
* .NET 9 or later
38+
* `app.MapStaticAssets();` in `Program.cs`
39+
* [`@Assets["..."]` in `App.razor`](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-9.0#deliver-assets-with-map-static-assets-routing-endpoint-conventions)
40+
* Use the so-called [cache busting](#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.
3541

3642
Using the correct client assets [avoids Telerik-related JavaScript errors](slug:troubleshooting-js-errors).
3743

38-
The required approach varies, depending on the Blazor application:
44+
>caption Map Static Telerik Assets in .NET 9 or later
45+
46+
````RAZOR.skip-repl
47+
<link href="@Assets["_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css"]" rel="stylesheet" />
48+
49+
<script src="@Assets["_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"]"></script>
50+
````
51+
52+
## Cache Busting
53+
54+
Cache busting varies depending on the Blazor application:
3955

4056
* [Blazor Web Apps and legacy Blazor Server apps](#blazor-web-apps-and-legacy-blazor-server-apps)
4157
* [Standalone Blazor WebAssembly apps and Hybrid apps](#standalone-blazor-webassembly-apps-and-hybrid-apps)
@@ -80,7 +96,7 @@ If the Telerik CSS theme and JavaScript file reside in the `index.html` file, yo
8096

8197
## Notes
8298

83-
In addition to cache busting, you can [use a `defer` attribute to load the `telerik-blazor.js` file asynchronously](slug:getting-started/what-you-need#javascript-file) and improve the client-side app performance.
99+
You can also [use a `defer` attribute to load the `telerik-blazor.js` file asynchronously](slug:getting-started/what-you-need#javascript-file) and improve the client-side app performance.
84100

85101
## See Also
86102

0 commit comments

Comments
 (0)