Latest Top 10 .Net 9 Blazor Features

Blazor marked .NET 8 as a significant milestone. It gave us interactive render modes, static SSR for entire apps, and a lot more. Now, .NET 9 is on the horizon (November 2024), and while it may not be as glamorous, it certainly packs some big punches for developers.

.NET 9 brings a variety of new changes for ASP.NET Core Blazor developers, improving performance, interactivity, and developer experience. The new features described in .NET 9 Preview 7 add capabilities and optimizations to Blazor, making it even more adaptable for developing modern web and hybrid applications.

What's new about Blazor.Net 9? Let's break it down.

1..NET MAUI Blazor Hybrid and Web App Solution Template

Blazor now supports the creation of hybrid applications with .NET MAUI. A new solution template simplifies the creation of apps that integrate native.NET MAUI components with web-based Blazor components.

Interactive Render Mode: Developers can choose a render mode (e.g., server-side or WebAssembly) to customize the level of interaction for individual components.

Shared Razor Class Library: Razor components are shared between native and web components, encouraging code reuse.

2. Optimized Static Asset Delivery with MapStaticAssets Middleware

The new MapStaticAssets middleware enhances static asset delivery by:

• Compression: Assets are Gzip-compressed for faster load times.
• Fingerprinting: Ensures unique asset identifiers using Base64, simplifying cache busting.
• Hot Reload Integration: Seamlessly clears asset caches during development when using Visual Studio's Hot Reload.

3. Runtime Component State Querying (Better Server side connection)

Blazor now provides tools to better understand and optimize component states at runtime:

• Execution Location: RendererInfo.Name reveals where a component is executing (e.g., client-side or server-side).
• Interactivity Check: RendererInfo.IsInteractive confirms if a component supports interactivity.
• Render Mode: ComponentBase.AssignedRenderMode helps in optimizing rendering workflows.

4. Enhanced Server-Side Reconnection

Blazor introduces better reconnection mechanisms for server-side applications:

• Retry Logic: New configuration options allow developers to customize reconnection intervals based on previous attempts.
• Automatic Full Page Refresh: Ensures seamless app continuity when reconnections fail.

Blazor.start({
 circuit: {
    reconnectionOptions: {
      retryIntervalMilliseconds: (previousAttempts, maxRetries) =>
        previousAttempts >= maxRetries ? null : previousAttempts * 1000
    },
  },
});        

5. Simplified Authentication Serialization

Authentication APIs in ASP.NET Core now support:

• Serialization: Authentication states can be serialized server-side and deserialized in the browser.
• Ease of Use: Reduces the need for complex code when integrating authentication, especially for WebAssembly apps.

6. Static Server-Side Rendering (SSR) with Interactive Routing

Blazor simplifies adding SSR pages alongside interactive components:

• [ExcludeFromInteractiveRouting] Attribute: Designate static pages that rely on HTTP cookies or server-based logic.
• Dynamic Rendering Modes: Non-annotated pages default to interactive modes, enabling a flexible mix of static and interactive experiences.

7. Constructor Injection for Razor Components

Razor components now allow constructor injection for services like NavigationManager. This enhancement allows developers to manage navigation and state updates directly in a component's constructor.

8. WebSocket Compression and Frame-Ancestors CSP

Blazor Interactive Server components now support:

• WebSocket Compression: Enabled by default but can be disabled for enhanced security.
• Content Security Policy (CSP): Configurable frame-ancestors directive restricts embedding apps in <iframe>.

9. Improved Input Handling with KeyboardEventArgs.IsComposing

The new KeyboardEventArgs.IsComposing property improves internationalization support by detecting composition sessions for keyboard input, which is crucial for handling complex character sets.

10. Virtualization Enhancements in QuickGrid

The QuickGrid component introduces an OverscanCount property, allowing developers to render additional rows outside the visible viewport, optimizing scrolling performance in virtualized grids.

<QuickGrid ItemsProvider="itemsProvider" Virtualize="true" OverscanCount="5">...</QuickGrid>        

11. Range Input in InputNumberlt;TValuegt; Component

The InputNumber<TValue> component now supports type="range", enabling slider inputs for numerical values while maintaining model binding and form validation.

<EditForm> <InputNumber @bind-Value="Model.ProductCount" max="999" min="1" step="1" type="range" /> </EditForm>        

A few more Blazor gifts for developers

• Constructor injection: Yes, you may now inject dependencies directly into your component's constructors.
• Composition Events: If you're developing apps for international customers, the new KeyboardEventArgs.IsComposing property will make it easier to handle with complex input methods.
• QuickGrid OverscanCount: When virtualization is enabled, this new parameter allows you to select the number of rows over which your QuickGrid renders.?

Upgrade:

Moving Blazor projects from older.NET versions to .NET 9 should be a simple process. Here's the idea:

1. Update your.NET SDK: Obviously, first things first. Download the most recent.NET 9 SDK and update your global.json file, if you have one.
2. Target framework: Change your project's target framework to net90 in the project file.

• Package References: Update your NuGet package references to the newest versions that are compatible with.NET 9. Microsoft normally makes this extremely simple.
• Breaking changes: While .NET focuses on enhancements, it's always a good idea to check the official documentation for any potential breaking changes that could affect your code.

Conclusion

The updates in .NET 9 significantly enhance Blazor’s capabilities, offering developers better performance, simpler integration options, and tools for creating both interactive and static web applications. Whether you’re building hybrid apps with .NET MAUI, optimizing static assets, or integrating advanced features like server-side rendering and authentication, Blazor continues to deliver a robust framework for modern web development