The default fallback page is always loaded first, even if the browser's address bar indicates other paths.

[jsakamoto]

From: @fingers10
(The original post is in the Issue #2)

---

@jsakamoto , I would like to understand more on flickering effect that occurs when prerendered site is loaded. Please can you assist me on this.

I have this repo - https://github.com/fingers10/WasmServerPrerender published to GitHub Pages using the below URL.

Here is the sample URL that I'm using for testing - https://fingers10.github.io/WasmServerPrerender/fetchdata

Steps I followed,

1. When I load in incognito window in chrome - The flickering effect is minimal. Only Data Shown in the screen is flickering. This is fine.
2. When I load in normal window in chrome - index.html in wwwroot loads and the actual page loads. Is this the expected behavior?
3. When I reload in both normal and in incognito window in chrome - index.html in wwwroot loads and the actual page loads. Is this the expected behavior?

Here is the video showing the same.

ScreenRecorderProject6.mp4

Thank you for your support and teaching.

[oneolddev]

I was able to reproduce the behavior reported by @fingers10. In my case, I deployed to Azure Static Web Apps service.

My educated guess is that the flicker (the appearance of the index page) prior to the deep-linked page is an artifact of the virtual DOM rendering process. After the application starts, it starts to build the virtual DOM based on the index page at the root. This initial virtual DOM is than updated to match the deep-linked page. The video shows the index page before the second update has completed.

It's much more apparent when you paste the deep-link into the address bar because

• the service worker is running
• the browser needs to allocate memory for tab.

If you rapidly repeatedly hard refresh the page, the flicker is less reproducible.

Based on @jsakamoto comments in #2, I removed the service worker and was not able to reproduce the flicker. There appears to be some interaction between the service worker and the rendering process.

I'm now curious to see if this flicker appears when the application is hosted. I'll try an experiment and report back. 😄

[fingers10]

@c0g1t8 I have tested what you have mentioned and confirm that this issue is because of the service worker. Thanks for the findings.

Here is the non service worker url I used for testing - https://fingers10.github.io/WasmNonServiceWorkerPrerender/fetchdata/

I'm not a pro in service worker. I'm still in learning phase. Let's wait to hear from @jsakamoto on this.

[jsakamoto]

Hi everyone,
Could try steps below?

• Update the version of the BlazorWasmPreRendering.Build package to 1.0.0-preview.25.0.
• If you also use the PublishSPAforGitHubPages.Build package, update its version to v.1.3.7.
• Edit your service-worker.published.js in your project as below:
  • Append the pattern /\.br$/ to const offlineAssetsInclude array.
  • Change the code inside the onFetch() function from const request = shouldServeIndexHtml ? 'index.html' : event.request; to const request = shouldServeIndexHtml ? (new URL(event.request.url)).pathname.replace(/\/$/, '') + '/index.html' : event.request;.

I attached the service-worker.published.js file that I applied changes above.
service-worker.published.zip

[fingers10]

@jsakamoto, Thanks for the inputs and fix. Now the correct page is getting loaded.

The flickering effect is minimal for simple screen - https://fingers10.github.io/WasmServerPrerender/fetchdata

But obvious for the following URL - https://ilovedotnet.org/blogs/blazor-wasm-publishing-to-iis

Here is the sample video.

ObviousFlickerIssue.mp4

[jsakamoto]

@fingers10

I figured out that the root reason for your last unexpected flickering effect is not this library.
That behavior is caused by the combination of lazy loading for assemblies and server-side re-rendering.
It is caused by the architecture and implementation of Blazor runtimes and built-in components.

I attached the source code of the minimal ASP.NET Core hosted Blazor WebAssembly app that can reproduce this problem.

• 📦BlazorPreRenderAndLazyLoadApp.zip

And also, I deployed it on Azure Web Apps, so anybody can confirm this problem on the fly (The URL is below).

• https://demo-blazor-prerender-and-lazyload.azurewebsites.net/lazy-page

I wrote a report document as below.

• 📕Report.pdf

Unfortunately, I have no idea how to resolve or work around this flickering problem, even though I spent a few days investigating it. 😥

Do you mind if I closed this issue with an "unresolved" status?

[fingers10]

@jsakamoto Many thanks for the detailed investigation. Can we report this to Microsoft in aspnet repo?

Yes you can mark this as closed with unresolved status.

[jsakamoto]

Can we report this to Microsoft in aspnet repo?

Yes we can! I posted about this problem to the ASP.NET Core repository right now.

• Full page flash when loading a prerendered page that uses lazy loading dotnet/aspnetcore#25731 (comment)

And I also tweeted it.

• https://twitter.com/jsakamoto/status/1547210240395190272

I'll appreciate it if you vote my issue comment and retweet my tweet above.

[fingers10]

@jsakamoto The fix provided in the service-worker.published.js,

Change the code inside the onFetch() function from const request = shouldServeIndexHtml ? 'index.html' : event.request; to const request = shouldServeIndexHtml ? (new URL(event.request.url)).pathname.replace(/\/$/, '') + '/index.html' : event.request;.

creates a cache issue.

Steps:

1. Deploy a blazor wasm app with pwa enabled.
2. Now make some changes in Index.razor screen.
3. Now publish and deploy again and navigate to index url of the app.
4. Note that new changes will not be reflected. You need to clear application cache and then refresh to see the new changes.

Video showing the problem:

1. I have an intial version deployed.
2. I made code change in Index.razor by adding <h1 style="background-color:yellow">Hello, Cache Problem</h1>.
3. Published and deployed the app.
4. Navigated to index url of the app.
5. Refreshed and expecting to see new changes but nothing happens.
6. Cleared cache and refreshed. Now I can see new code changes.

CacheProblem.mp4

Please can we reopen this?

[jsakamoto]

@fingers10

Please can we reopen this?

No, you should not do that. The issue you reported is not suitable for this issue. (Please see also the title of this issue.)

Instead, I open a new issue as the following.

• Need to clear application cache and then refresh to see the new changes on PWA enabled Blazor WebAssembly apps #18

Please don't hesitate to open a new issue if the issue you want to post is not suitable for existing issues. Please be careful if you post any issues to a thread for n unsuitable theme carelessly, it will cause uncontrollable handling issues.