In this guide, we will walk through the practical steps for implementing ASP.NET client-side caching. We will start by creating a new ASP.NET project and then enable caching for it step-by-step. If you want to skyrocket your C# career, check out our powerful ASP.NET full-stack web development course that also covers test-driven development.
What is Caching?
Caching refers to storing web resources, such as images and scripts, on the client side (i.e., the user’s browser) so that they can be quickly retrieved without needing to be reloaded from the server. This can significantly improve the performance of web applications by reducing the amount of data that needs to be transferred over the network and minimizing the number of requests that need to be made to the server.
What is Client-Side Caching?
Client-side web caching refers to storing web resources, such as images and scripts, on the client side (i.e., the user’s browser) so that they can be quickly retrieved without needing to be reloaded from the server. This can significantly improve the performance of web applications by reducing the amount of data that needs to be transferred over the network and minimizing the number of requests that need to be made to the server.
Step 1: Create a new ASP.NET project
Open Visual Studio and create a new ASP.NET project. Or you can create it using the following command in the terminal:
|
1 2 |
dotnet new webapp -o CachingDemo |
This command creates a new ASP.NET Core project named “CachingDemo”. By the way, you can also learn about C# minimal APIs in this article.
Step 2: Enable static files middleware
To enable static files middleware, open the Program.cs file find the following code before app.Run();:
|
1 2 |
app.UseStaticFiles(); |
This code enables the static files middleware and allows the application to serve static files like CSS, JavaScript, and images.
Step 3: Add cache-control header
To tell the browser to cache static files, configure the static files middleware to add a cache control header to static file responses.
|
1 2 3 4 5 6 7 8 9 |
app.UseStaticFiles(new StaticFileOptions { OnPrepareResponse = context => { const int durationInSeconds = 60 * 60 * 24 * 7; // 1 week context.Context.Response.Headers[HeaderNames.CacheControl] = "public,max-age=" + durationInSeconds; } }); |
This code sets the cache-control header to allow the browser to cache static files for a week. Like-wise you can add the cache-control header to the responses in other endpoints to ask the browser to cache them for a while.
What is Cache-Control Header?
Cache-Control is an HTTP header that defines the caching policies for a web resource. The header is used to specify directives for caching mechanisms in both requests and responses. The directives specify whether a response can be cached and, if so, by whom and for how long. The header can be used in requests and responses. In this case, it is used in the response to specify how long the response can be cached by the browser.
Modern browsers automatically cache responses based on the CacheControl headers. The cache-control header specifies how long the response can be cached by the browser. If the cache-control header is set to public and the max-age is greater than 0, the browser will cache the response. If the max-age is set to 0, the browser will not cache the response. If the cache-control header is set to private, the response will not be cached by shared caches like proxies but may be cached by the browser’s own cache.
Setting the cache-control header to an appropriate value, such as a week (as shown in the example code above), allows the browser to cache the static files for a while, reducing the number of requests that need to be made to the server and improving the performance of the application. By the way, did you know that we offer a unique and powerful online course that boosts your C# career? Check it out here! This article also walks you through the steps to implement fast and performant logging in your apps.
Bonus: Enabling response caching
There are times when an expensive operation has to be accomplished on the server frequently. Instead of doing the operation, we can cache the response on the server after the first accomplishment and return it for subsequent requests for a while. This technique is so-called Response Caching.
To enable response caching, open the Program.cs file and add the following code in the ConfigureServices method:
|
1 2 |
builder.Services.AddResponseCaching(); |
This code enables response caching dependencies.
Next, add the following code next to app.UseStaticFiles(); and before app.UseCors(); middleware if exists.
|
1 2 |
app.UseResponseCaching(); |
app.UseResponseCaching(); enables response caching middleware in the application pipeline. This allows the application to cache the responses of HTTP requests, which can significantly improve the performance of the application by reducing the amount of data that needs to be transferred over the network and the number of requests that need to be made to the server.
When app.UseResponseCaching(); is called, the middleware caches the response of an HTTP request based on the request’s headers. The middleware then checks if a subsequent request matches the same cache key and returns the cached response if it exists. If the response is not in the cache, the middleware forwards the request to the next middleware in the pipeline and caches the response before returning it to the client.
To enable response caching, you also need to call builder.Services.AddResponseCaching(); This method registers the response caching middleware with the application’s dependency injection (DI) container.
It’s important to note that response caching is not appropriate for all types of responses. For example, responses that contain sensitive data or dynamic content that changes frequently should not be cached. However, for responses that are static or change infrequently, response caching can be an effective way to improve the performance of your application.
Conclusion
Client-side web caching techniques are an essential aspect of improving the performance of ASP.NET applications. By following the practical steps outlined in this guide, you can implement caching techniques and provide a better user experience to your users. Additionally, caching can further reduce the amount of data that needs to be transferred over the network and the number of requests that need to be made to the server. However, it’s important to note that caching is not appropriate for all types of responses, so it’s important to carefully consider which responses to cache. By implementing these caching techniques, you can significantly improve the performance of your web application and provide a better user experience. You can also learn more about Rest APIs in this article.