LearnOqtane.com Dogfooding Oqtane 5.1.1
To stay up-to-date with the latest release of Oqtane, I recently upgraded LearnOqtane.com to 5.1.1, which is hosted on SmarterASP.net. While testing the website from a user experience perspective, I noticed a lot of flickering when navigating between pages, especially the admin pages. In addition, I also noticed strange behaviour like an error when going to various pages, and sometimes the site wouldn't load, and I would get a blank page.
Thinking it might be a bug in 5.1.1, I logged the following issues:
- I have just noticed this error is back in 5.1.1 #4162
- [BUG] - Sites does load when logged in have to press refresh page in production #4163
Shaun Walker's response was, "This is a known problem with the initial release of Blazor in .NET 8. You need to make sure you have the latest SDK / Hosting Bundle (8.0.4) installed in your environment."
When I checked the System Info of LearnOqtane.com, It indeed showed that the version of .Net was running 8.0.0
So I logged a support ticket with them and worked with them for a few days to convince them to upgrade to 8.0.4. which they understood and upgraded to SDK 8.0.4
This resolved #4162 and #4163. However, when navigating between pages, there was still a lot of flickering. On debugging, I noticed that the Blazor Lifecycle methods werebeing hit twice and causing the Flashing of the page.
With the new Blazor .Net 8, The RenderMode not Interactive server-side rendering (Interactive SSR); by default, it is Static server-side rendering (Static SSR). As of 5.0 Oqtane Framework has taken an approach to adopt Static SSR. By default each site you create by default has Rende Mode set to Static, Interactivity set the Server (Signal R) and Prerender set to Yes
This Server Side Prerendering is what the problem was. because with it being on we get a Flash of the page when loading data. This happens because the Blazor Lifecyle Methods are hit twice. I logged the following issue:
- [ENH] - Add Prerender IModuleControl property (similar to RenderMode) to enable and disable prerender at component level #4178
I submitted the following Pull Request
This Pull request has been merged into the dev branch and will be in the next release of the Oqatne Framework. So bottom line you can now set this property to true in your code section of each component
public override bool? Prerender => false;
However, remember to use this only on your internal components, which are not front-facing, because it will adversely affect SEO, and search engines will have an issue crawling your website.
Now, I'm back to recording videos and working on Amazing Oqtane Studio. I will Introduce Amazing Oqtane Studio in my next blog!