Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.
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.
π 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.
Hey Reader, After 15 years of building web apps, I just recently discovered Vertical Slice Architecture. I know. Iβm late to the party. But wow, this approach really changed how I think about structuring Blazor projects. So I decided to show you a simple, real-world example of how to use Vertical Slice Architecture in a Blazor Server app. π₯ Watch the full tutorial now: In this new tutorial, you'll learn: β How to structure your app with feature folders β How to avoid overcomplicating things...
Hey Reader, In my last videos, we built a solid CRUD API using Vertical Slice Architecture, Minimal APIs, and Carter - super clean and modern. But thereβs still one problem... π What happens when a user sends empty or invalid data? In this new YouTube tutorial, Iβll show you how to fix that with: And yep, the full source code is free to download. Just check the link in the video description. If youβve been enjoying this Vertical Slice series, this is a must-watch. Itβs a simple upgrade that...
Hey Reader, If you're building apps with Blazor, you've probably asked yourself this: π Should I use SSR, Blazor Server, or WebAssembly? Itβs a common question - and I get it a lot. So I made a brand-new YouTube video walking you through how to choose the best one for your app. π₯ Watch it here: If you're building a Blazor app or planning to do so soon, this should help clear up a lot of confusion. Let me know what you think, and feel free to reply if you have any questions. Take care, Patrick...