Blazor Updates, Hot Reload and Minimal APIs Highlight ASP.NET Core in .NET 6

Recent enhancements to ASP.NET Core include hot reload and Razor compiler speed improvements. This article looks at these updates and more. In addition, this article describes the new ErrorBoundary component. Hot reload is a great way to change the markup of a page without losing the current app state. Hot reload also supports changes to CSS. CSS Hot Reload detects changes and applies them live to the DOM.

JS interoperability

With the recent release of ASP.NET Core, Blazor supports JavaScript interoperability. Hot Reload reacts to most changes made to a method’s body, such as adding or removing variables or expressions, and editing statements and local functions. Hot Reload does not react to changes outside the method body, such as adding a new await operator or yield keyword expression.

The updated Razor compiler now utilizes C# source generators that run during the compilation process and produce additional files. This change simplifies the compiler and decreases build times. Previously, the Razor compiler produced a separate Views assembly and a set of public types under the AspNetCore namespace. Now, you can use a single method to access any component.

New Hot Reload features make it easy to modify managed source code while debugging. It allows you to update Razor rendering logic in real-time, without affecting the app’s state. You can also enable Hot Reload to execute automatically after a file is saved. This is fast, and works with Blazor apps and Web applications.

Blazor also has several new features with.NET 6. Blazor now supports hot reload and minimal APIs, which allow for rapid feedback cycle loops while working on a Blazor component. Hot Reload is only necessary in rare situations, and you can see any changes in the component almost immediately. You can also use Blazor’s new features with a Blazor project.

Blazor also supports desktop apps. Blazor’s MAUI extends the concept to desktop applications. Using Blazor in desktop apps eliminates the seam between C# and Javascript, and reduces code requirements and development time. If you’re planning to use Blazor, it’s worth exploring its new features. The possibilities are endless.

Prerendering from server to improve initial load time

A popular method to improve initial load time is to prerender the data that is needed to render the page. This technique buys time by having the server handle the first request before the client renders the page. However, static hosting providers don’t support this technique, and data must be retrieved twice. Prerendering the data will increase the initial load time of your app, but it may not be the most effective solution for your project.

Blazor is an excellent tool for prerendering from the server. This technique uses a static application to display the user interface (UI) before the application downloads the full file. Although this method doesn’t support prerendering at request time, it can be hacked to improve initial load time by using existing prerendering tools. In this tutorial, I’ll walk you through setting up a Blazor WASM project, adding PowerShell/Bash scripts, and GitHub Actions to deploy the application to GitHub Pages.

Razor compiler speed improvement

A major performance improvement is achieved by using Roslyn Source Generators with the Razor compiler. These compilers reduce the amount of time required to compile ASP.NET Core web apps by as much as 50%. By using Roslyn Source Generators, developers can debug their applications in half the time. Microsoft benchmarks have shown that this compiler speed improvement is significant for both small and large projects.

With this improvement, Razor no longer base64-encodes binary data when doing JS interop. Users can now use JS interop to stream binary data, making uploading large files faster and more convenient. In addition, the inputfile component has been updated to take advantage of the JS interop improvements. Users will notice a significant speed improvement in uploading files.

The AOT compilation for Blazor apps increases runtime performance, but a higher size is associated with it. Typically, Blazor web-assembly apps run on the browser using the.NET IL interpreter, which makes the application run slower than the server-side.NET JIT runtime. However, AOT compilation enables native WebAssembly execution, which is quite fast. It can also be a good choice for CPU-intensive tasks.

Another notable speed improvement in the.NET Framework is the use of RyuJIT, the next generation of JIT compiler. This new compiler enables developers to compile code faster than ever before. With RyuJIT, developers can benefit from twice the speed of the previous 64-bit compiler and 30% faster ASP.NET Core in.NET projects. The new compiler also records information about the code execution, which allows it to generate more efficient native machine code.

New ErrorBoundary component

New features include error boundaries and hot reload, which are useful in handling unhandled exceptions. Blazor also offers an ErrorBoundary component that wraps desired content with an error UI whenever an unhandled exception occurs. This component is also available for defining error content. By default, it renders an empty div with an ErrorBoundary CSS class. However, you can customize the error content with the ErrorContent property.

The latest Blazor release offers a few new features. Dynamic components determine component rendering at runtime. This feature is helpful for adding Blazor components to JavaScript apps. Previously, a Blazor application required a root component to render when the app started. With the new version, it no longer requires a root component to render.

Developers will be able to make use of Hot Reload on Visual Studio 2022 and Visual Studio Code. Hot Reload allows developers to edit managed source code while debugging without having to run a debugger. This new feature is so convenient that it’s possible to set it to automatically execute whenever a new file is saved. It’s also fast and works well for Blazor apps and Web applications.

Developers who use Blazor for web applications can reuse the same code for desktop apps as well. Blazor supports ahead-of-time compilation and can target desktop applications via MAUI. With Blazor desktop, developers can write web applications in C# and Javascript without having to worry about a mapping layer between front-end and back-end code. The Blazor desktop platform enables developers to create cross-platform applications on macOS and Windows.