Make the "AntDesign.Docs.Wasm" be able to pre-render with the "BlazorWasmPreRendering.Build" NuGet package. #2761
Conversation
… from the root HTML.
Pre-renderer will start traversing <a> links from root ("/") HTML document. But on this app, the root HTML document doesn't have any <a> links such as docs, components, etc. It only works to "redirect" to language-specific URLs such as "en-US" or "zh-CN" by C# code. Therefore developer has to explicitly specify those URLs via MSBuild properties for the pre-renderer.
Using singleton scope means sharing the application state, such as language selection, with ALL USERS when the app runs as a Blazor Server app. This will cause mass confusion among users and will cause application crashes.
- invoke it in the OnAfterRenderAsync() instead. see also: https://learn.microsoft.com/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet#prerendering
…Async(). - invoke it in the OnAfterRenderAsync() instead. see also: dotnet/aspnetcore#13582 (comment)
|
|
|
|
|
Thank you so much @jsakamoto , but I'm not sure why I opened the preview page above and it still took a while to show up(It may be after all *.dlls have been loaded). But obviously the pre-rendered html file was loaded. |
|
Hello @jsakamoto , do you have any ideas? |
|
@ElderJames Sorry to late! I'll reply with more detail later. Please give me time for a while. |
This is by design, particularly with default configurations. "static pre-rendering" of Blazor WebAssembly apps has a few levels. The default and easiest level is static pre-rendering for only search engine optimization. That preview page is at this level for now. The pre-rendered HTML files definitely contain pre-rendered content, but that pre-rendered content is covered by "loading..." progress indicator content. So users never see the pre-rendered contents on a web browser until the Blazor WebAssembly engine has been started and renders the application component. However, search engine crawlers can read pre-rendered contents in that static pre-rendered HTML files, so this is meant full for the purpose of search engine optimization. For example, please imagine the "Counter" page. If the "Loading..." progress contents didn't appear and didn't hide the static pre-rendered contents, users would see the "CLICK ME" button on the "Counter" page immediately. But if users clicked the "CLICK ME" button quickly, there would be nothing to happen because the Blazor WebAssembly engine has not been started. If users run into this behavior, the user must be confused. This is the reason why hide the pre-rendered contents by default from users until the Blazor WebAssembly app has been started. But of course, we can take the next level of static pre-rendering. I'll explain how to do that later. |
ElderJames
force-pushed
the
fix/chore/prerender-build
branch
from
405329f
to
db85458
Compare
|
Thank you @jsakamoto ! My goal is still to speed up the first load and make the site look faster, although users won't be able to interact until wasm has finished loading |
|
Another problem was encountered when |
|
|
Sure. I guess you are already done, setting the But, as you already know, please keep in your mind that the user interactions will not work until the Blazor WebAssembly engine warm up. The responsibility to manage that is the developers of the app. |
By default, the "BlazorWasmPreRendering.Build" saves pre-rendered contents to "foo/bar/index.html" for the routed URL path "foo/bar". This is by design intentionally to support general static web contents server. But this behavior causes the problem you said. Instead, you can set the If your static contents web server can respond to the "foo/bar.html" HTML file for the HTTP request path "foo/bar", you can take this strategy, and the problem about NavLink will go away. Pleas see also: "Output style" |
Codecov ReportPatch coverage has no change and project coverage change:
Additional details and impacted files@@ Coverage Diff @@
## master #2761 +/- ##
==========================================
- Coverage 46.72% 46.71% -0.02%
==========================================
Files 558 558
Lines 26726 26726
Branches 266 266
==========================================
- Hits 12489 12485 -4
- Misses 14197 14201 +4
Partials 40 40 ☔ View full report in Codecov by Sentry. |
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
Currently, the "AntDesign.Docs.Wasm" can not be pre-rendered to static HTML files with the "BlazorWasmPreRendering.Build" NuGet package. Some of the reasons for it come from the "AntDesign.Docs" project not being implemented to run on not only Blazor WebAssembly but also Blazor Server. (Pre-rendering mecanism by the "BlazorWasmPreRendering.Build" NuGet package is based on the standard pre-rendering feature of Blazor Server.)
The changes included in this pull request will fix those problems above, and it will be able to pre-render into static HTML files at publishing time with the "BlazorWasmPreRendering.Build" NuGet package via the dotnet CLI command like below.
📝 Changelog
Fix: configure pre-rendering to fetch the URLs that cannot be reached from the root HTML.
<a>links from root ("/") HTML document. But on this app, the root HTML document doesn't have any<a>links such as docs, components, etc. It only works to "redirect" to language-specific URLs such as "en-US" or "zh-CN" by C# code. Therefore developer has to explicitly specify those URLs via MSBuild properties for the pre-renderer.Fix: incorrect service scope usage.
Fix: don't invoke
NavigationManager.NavigateTo()in theOnInitializedAsync()OnAfterRenderAsync()instead.Fix: don't invoke JavaScript interop in the
OnInitializedAsync().OnAfterRenderAsync()instead.The pre-rendering process on the "AntDesign.Docs.Wasm" will take a few minutes because it will take over 2 sec to fetch each page. This slow process is caused by an explicit 2 sec delay at OnInitializedAsync() in the "App.razor" of the "AntDesign.Docs" project.
I don't know why that explicit delay is needed. When I commented out the explicit delay line, the pre-rendering process was finished in a few seconds.
☑️ Self Check before Merge