Disable prerendering on a single component in Blazor WASM
I currently have prerendering enabled in my Blazor WASM hosted project (in
_Host.cshtml through <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />), and prerendering works.
However, I have one component in my app that should not be prerendered, and it's prerendered state would only cause confusion by my users. Is there a good way to exclude a single component from prerendering?15 Replies
there is a test you can do to determine if you're in the server or client contexts... let me see what blazebin does
inject PersistentComponentState, from there you get some methods that are only executed at server render time. You can use that to set a flag that your component can use to not perform any of its init/on load logic
GitHub
BlazeBin/_PreRenderLayout.cshtml at main · Cisien/BlazeBin
A PasteBin for developers. Created using asp.net core's Blazor framework and leveraging VS Code's monaco-editor - BlazeBin/_PreRenderLayout.cshtml at main · Cisien/BlazeBin
i wouldn't be surprised if that's not the best way to approach it
maybe set an element in _host.cs which is removed during wasm init
Oh, that's interesting. I will check this out and see if it works
anything in your
app element is replaced when blazor initializes
you can probably also check if a config value is present that's set server side, but not client side
with pre-rendering, your app is executed twice. once in the server's context and once in the client's context. Only things that you persist using the PersistentComponentState are transferred from the server to the client context
you may even be able to use that state to make the pre-rendered component useful to your usersif you look carefully when you navigate to a blazebin post, you'll see the code is shown in the background of the loading screen (thought, without color or line numbers) -- this is done by loading the same post as part of pre-rendering, just printing it in a normal div instead of the monaco editor (since it doesn't pre-render js) https://paste.mod.gg/ijqarjydtnrx/0
BlazeBin - ijqarjydtnrx
A tool for sharing your source code with the world!
It might be that I am approaching this wrong, and that there is a better solution. I am making a Blazor Hybrid app, with a MAUI Blazor desktop client and a Blazor WASM hosted client. I have a Razor Component Library from which both MAUI and WASM use pages and components, so that the UI matches in both.
One feature I want is only relevant for the Desktop Client. The way I currently check for platform to filter it out in Web Client is through the use of
RuntimeInformation.IsOSPlatform(OSPlatform.Windows). While this technically works, it is not filtered out in the prerender.
I assume it is because the locally hosted Web Server is running on my Windows machine, and that the condition therefore results to True in the Server Context. I guess I could host the Server on a Linux image in Docker, and maybe circumvent the issue, but I'd ideally want to find a better long-term solution.the only real "state" that I move between contexts involves an alternative method to move the anti-forgery token into the client app in a way to make it annoying to reproduce -- to discourage using it as an automatable text dump site -- i don't want to host password lists, and garbage like that
I have no experience with blazor in maui, so i can't provide any insight there
hosting it locally in docker isn't really an option
most of your users won't have docker set up, for one
you should still be able to tell if you're in a server or client context
a naive approach would just be a class with a static "IsServerRendering" property that you only set in your _host.cshtml.cs
Yeah, this may be the simplest solution. Perhaps just check if a Server-only value is null or something
in blazebin, i have a "state container" class that holds the app state, that includes a flag for server rendering
you can chose to only include the component if it's not in server mode
or have the component hide everything
you may need to include some placeholder content to keep the page from shifting around when the blazor component loads
another thing to keep in mind with pre-rendering -- even though the site looks ready to use, it may not be. you should still handle blocking user input until the site is ready to use
true - this is also something I should add, thanks!
I think I will try adding a server-only value first, and check how blazebin does the server render flag. That seems useful for other use cases as well
GitHub
BlazeBin/Startup.cs at main · Cisien/BlazeBin
A PasteBin for developers. Created using asp.net core's Blazor framework and leveraging VS Code's monaco-editor - BlazeBin/Startup.cs at main · Cisien/BlazeBin
the client doesn't set that property: https://github.com/Cisien/BlazeBin/blob/main/src/BlazeBin/Client/Program.cs#L20
Thank you so much, @Cisien! I got it to work by using a simple StateContainer only containing the IsServerSideRender bool, and it works in both desktop and web clients!
nice