Explore Prerendering in Blazor Server & WebAssembly with .NET 8 🔥


Hey Reader,

In this week's newsletter, I'm focusing on a fundamental yet often misunderstood aspect of Blazor in .NET 8 - prerendering in the new render modes (Server, WebAssembly, and Auto).

🚀 Prerendering Issue Resolution Video

You have two choices: watch the video below, which illustrates the common issue with prerendering, or continue reading for the code details.

video preview

🌟 Disabling Prerendering in Blazor with .NET 8

It's quite straightforward. When you opt for one of Blazor's new rendering modes in .NET 8 - Server, WebAssembly, or Auto - you'll need to use the @rendermode directive. This directive allows you to select one of these modes for either a page or a component:

Here's an important note: if you're loading data, for example, prerendering is on by default. This can cause an unsightly flicker. Observe in the gif below how the values change twice upon page reload.

That's prerendering for you. While it might be beneficial for SEO, there are times when it's not desirable due to the negative impact on user experience.

To address this, simply instantiate the render mode of your choice and set the prerender parameter to false.

This solution is applicable to all render modes and is also useful if you're looking to modify the effect for specific components rather than an entire page.


💌 Now It's Your Turn! How do you feel about prerendering? When and where would you use it?

A huge thank you to our community, and special gratitude to my Patrons for their steadfast support. Your contributions are vital to the success of this newsletter and my YouTube channel.

Excited for our next coding journey together. Stay safe and happy coding! 💻

Take care,

Patrick


Patrick God

Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.

Read more from Patrick God
video preview

Hey friend, Quick one today. GitHub Copilot makes form validation feel easy. But if you are not careful, it slowly decides where your logic lives. Your app still works. But the structure gets worse. In today's video, I show you: A simple Blazor register form How Copilot refactors it the wrong way How to move validation out cleanly How to guide Copilot with clear rules Watch the video here 👇 Have a great start to the new year! 🎆 Take care, Patrick P.S. If you want to learn how to use AI as a...

video preview

Hey friend, I just released a new video and wanted to share it with you. Watch the video here 👇 I used GitHub Copilot to build a small Blazor weather app. It worked almost instantly and even used real API calls. At first glance, everything looked great. Then I opened the Razor file. All the logic was sitting in one place. UI, API calls, and business logic mixed together. It worked, but it was not something I would ship. In the video, I show how I fix this using a single refactoring prompt. I...

Hey friend, I just released a new video and I think you will enjoy this one. In the video, I ask GitHub Copilot to build a real mortgage app in Blazor. The app works. But the code is messy. All the business logic ends up in the UI. Fast results. Bad structure. Then I clean it up properly. Same behavior. Same output. Much better code using services, interfaces, and dependency injection. It shows why Copilot is powerful, but dangerous without rules. Watch the video here 👇 Enjoy the breakdown...