Hey Reader,

Let's talk about an exciting new feature in .NET 9.

It is adding static server-side rendering (SSR) pages to a globally interactive Blazor Web App.

What Are Render Modes?

If you're familiar with Blazor in .NET, you know we have these interactive render modes:

• Blazor Server: Runs on the server.
• Blazor WebAssembly: Runs in the browser.
• Auto Render Mode: Combines both.

We also have SSR (Static Server-Side Rendering), which means everything is rendered on the server and sent to the client as finished HTML.

But what happens when you need interactivity, like clicking a button to trigger an action without using a form?

That’s where interactive render modes come in.

Creating a Blazor Project in .NET 9

When you create a new Blazor Web App project in .NET 9, you can choose the render mode: Interactive Server, WebAssembly, or Auto. You can also set this render mode globally or per page/component.

In Visual Studio 2022 Preview, you can use the following settings to create a new project.

Set the interactive render mode to "Server" and the interactivity location to "Gloabl".

In general, if you want to set the render mode only for a specific page or component, you can do that too.

This flexibility allows you to mix and match static and interactive rendering in your application.

Example: The Weather Page

On the weather page, we simulate fetching data from the server. Here, SSR can be used since there’s no need for interactivity.

With .NET 9, you can change render modes dynamically, allowing certain pages to be interactive while others remain static.

To do that, we the following line on top of the component:

Additionally, we also have to change the App.razor a little:

Make sure to use the "PageRenderMode" as render mode for the HeadOutlet and the Routes components.

Improving User Experience with Stream Rendering

To improve the user experience, we can also use stream rendering.

This technique loads the page immediately while fetching data asynchronously, providing a smoother experience.

For example, when navigating to the weather page, the page loads instantly, and data is displayed shortly after.

To make use of stream rendering, add the following attribute on top of the Weather.razor file:

Using WebSockets

Another important aspect is the use of WebSockets with Blazor Server globally. However, if you use SSR, WebSockets aren’t necessary, which can improve performance and scalability.

For applications requiring specific layout components, like those from Radzen or MudBlazor, using global render modes can be beneficial.

Conclusion

In summary, .NET 9’s improved render modes in Blazor offer great flexibility and performance enhancements. You can choose the best rendering strategy for your application's needs, improving both usability and efficiency.

Check out the full tutorial on YouTube 👇

​

Happy coding!

Take care,

Patrick

PS: Need help understanding .NET & Blazor? There are two ways I can help you with:

1. Check out the .NET Web Academy, which provides masterclasses and a supportive community of like-minded developers.
2. I'm open to coaching. If you need specific help, reply to this email and we'll figure something out.

PPS: Would you like to sponsor this newsletter? I'm just an email away. Have an awesome weekend! 🎉