search

jsakamoto / BlazorWasmPreRendering.Build

When you publish your Blazor Wasm app, this package pre-renders and saves the app as static HTML files in your public folder.
https://jsakamoto.github.io/BlazorWasmPreRendering.Build/
Mozilla Public License 2.0
261 stars 15 forks source link

Prerendered mode and static .html files not working properly #26

Closed drma-tech closed 1 year ago

drma-tech commented 1 year ago

https://github.com/jsakamoto/BlazorWasmPreRendering.Build/issues/25 It's a continuation of my previous ticket, which I thought I had solved, but I was wrong. I finally found the reason, I just don't know how to solve it yet:

First, I wanted to show that for some reason, static mode doesn't work. just prerendered it. in static mode, the page fails to load and does not load any of the head elements (title, description), but in prerendered, everything works normally. (I also don't know if this has anything to do with the problem) image image image

but now comes the cause of all my problems: when you reload the page, a content is displayed temporarily until the final page is displayed. the problem is that this content is from my main page and not the page where I'm browsing. that's why google can only recognize the main page regardless of which page I test. https://www.awesomescreenshot.com/video/14170343?key=b5b8793a5af4e3f1cb30bbde147da9d3

drma-tech commented 1 year ago

@jsakamoto

I've already found out what's causing this anomaly (statically just showing the content of the main page). projects created with PWA. which is my case, I only have projects like this.

Is there anything I can do to remedy this? or is it something that has to be done from within your component?

drma-tech commented 1 year ago

I fooled myself again. only localhost works. When I publish in the clouds, it will only display the main page again.

drma-tech commented 1 year ago

@jsakamoto

jsakamoto commented 1 year ago

@drma-dev

First, I wanted to show that for some reason, static mode doesn't work. just prerendered it. in static mode, the page fails to load and does not load any of the head elements (title, description), but in prerendered, everything works normally. (I also don't know if this has anything to do with the problem)

The reason for that problem is probably not based on the "Blazor PreRendering" NuGet package, I guess, so far.

But unfortunately, knowing the behavior of the problem was not enough to resolve this case. Therefore, can you provide your Blazor project to me? I need to dive into your project settings and source code to resolve this issue.

jsakamoto commented 1 year ago

@drma-dev Here is another solution tip. It may be difficult to solve this problem by trial and error on a production project. By creating another very simple project, installing this package, and then re-implementing the same features one by one as in production, and checking the results of each publishing, you will have a better chance of finding out what is causing the problem.

drma-tech commented 1 year ago

@drma-dev

First, I wanted to show that for some reason, static mode doesn't work. just prerendered it. in static mode, the page fails to load and does not load any of the head elements (title, description), but in prerendered, everything works normally. (I also don't know if this has anything to do with the problem)

The reason for that problem is probably not based on the "Blazor PreRendering" NuGet package, I guess, so far.

But unfortunately, knowing the behavior of the problem was not enough to resolve this case. Therefore, can you provide your Blazor project to me? I need to dive into your project settings and source code to resolve this issue.

as I said, this happens in PWA projects. I will create a project from scratch for you to study.

jsakamoto commented 1 year ago

@drma-dev

I will create a project from scratch for you to study.

Sounds good. Then, I'm going to wait to hear from you.

drma-tech commented 1 year ago

@jsakamoto well, I created the project from scratch a few days ago, but I was waiting for google to index it so I could prove it. https://github.com/drma-dev/PrerenderedPWATest

the domain: https://modern-matchmaker.com/

the title and several meta tags (open by the browser): image

the content read by google indexer (tags doesnt appeear and title is from index.html, not index.razor):

<!DOCTYPE html>
<html lang="en" style="--blazor-load-percentage: 87.5%; --blazor-load-percentage-text: &quot;87%&quot;;"><head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>PrerenderedPWATest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="PrerenderedPWATest.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />

<link rel="modulepreload" href="_framework/dotnet.7.0.10.rvqpy29e0i.js" crossorigin="anonymous" integrity="sha256-tUkVS4U0Vxxtapw398+Wa99LWNq9tlbfXS5gC7/8Yh4=" /></head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%"></circle>
            <circle r="40%" cx="50%" cy="50%"></circle>
        </svg>
        <div class="loading-progress-text"></div>

<!-- %%-PRERENDERING-BEGIN-%% -->
<div style="opacity: 0; position: fixed; z-index: -1; top: 0; left: 0; bottom: 0; right: 0;">
jsakamoto commented 1 year ago

@drma-dev I'm not sure about the results of Google indexer at this time, but I'm sure that the "BlazorWasmPreRendering.Build" worked correctly. You can verify it with other tools that send HTTP GET requests, such as the cURL command.

image

If you invite me to the Google Search Console for the property of the https://modern-matchmaker.com/, I might be able to investigate what happened in the Google indexer. (You can find my Google Account (Email) from the screenshot bellow.)

image

drma-tech commented 1 year ago

I don't know if I understood exactly your change in the file.

is that the right way to handle it? should i send it to microsoft so they can change the template?

jsakamoto commented 1 year ago

@drma-dev On the other hand, could you update your sample project by my pull request?

https://github.com/drma-dev/PrerenderedPWATest/pull/1

It doesn't affect the results of the Google Indexer, but it might change the behavior on a web browser to be the same as your expectation.

jsakamoto commented 1 year ago

@drma-dev

I don't know if I understood exactly your change in the file.

No worry, but you wil have to understand the PWA (particular service worker) more deeply.

drma-tech commented 1 year ago

I already did the merge. and already add you on google console.

jsakamoto commented 1 year ago

@drma-dev

I already did the merge. and already add you on google console.

Thanks!

is that the right way to handle it?

Yes, I think so. But it is only for this type of the Blazor Wasm app.

should i send it to microsoft so they can change the template?

No. The configuration of the service worker strongly depends on each case. The default template from Microsoft is good enough. Configure the service worker to work correctly is the responsibility of the application developers side.

jsakamoto commented 1 year ago

@drma-dev

One more thing: you have to delete the <title> tag in the wwwroot/index.html tag. It conflicts with another <title> tag that comes from the <HeaderOutlet> of Blazor.

drma-tech commented 1 year ago

@drma-dev On the other hand, could you update your sample project by my pull request?

drma-dev/PrerenderedPWATest#1

It doesn't affect the results of the Google Indexer, but it might change the behavior on a web browser to be the same as your expectation.

I did not understand that. in the browser it behaves normally. the problem is google index. all this because I want to use google adsense and it requires that the pages are properly indexed.

drma-tech commented 1 year ago

@drma-dev

One more thing: you have to delete the <title> tag in the wwwroot/index.html tag. It conflicts with another <title> tag that comes from the <HeaderOutlet> of Blazor.

done. in a few days, should be detected by google.

jsakamoto commented 1 year ago

@drma-dev

the problem is google index. all this because I want to use google adsense and it requires that the pages are properly indexed.

I may have found the cause. As you already know, due to the Google Indexer being too clever, it does not only index HTML text but also interprets the JavaScript code inside the HTML.

As a result, it seems that the intermediate state, while reorganizing the head element - after the pre-rendered title and meta elements were removed and before re-rendered those elements at runtime - was indexed. I guess that is the reason why the title and meta elements won't be indexed.

I want to manage to solve this issue. Please give me a few days.

jsakamoto commented 1 year ago

@drma-dev

I released the fixed new version of the "BlazorWasmPreRendering.Build" today.

Could you try it out on your project?

drma-tech commented 1 year ago

ok, already updated. now we wait.

drma-tech commented 1 year ago 
<!DOCTYPE html>
<html lang="en" style="--blazor-load-percentage: 75%; --blazor-load-percentage-text: &quot;75%&quot;;"><head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <base href="/"/>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link href="PrerenderedPWATest.styles.css" rel="stylesheet"/>
    <link href="manifest.json" rel="manifest"/>
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png"/>
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png"/>

<!-- %%-PRERENDERING-HEADOUTLET-BEGIN-%% -->
<title>Prerendered PWA Test | Home</title><meta Property="og:title" Content="Prerendered PWA Test | Home" />
    <meta Name="twitter:title" Content="Prerendered PWA Test | Home" /><meta Name="description" Content="Description of Index." />
        <meta Property="og:description" Content="Description of Index." />
        <meta Name="twitter:description" Content="Description of Index." /><meta Name="keywords" Content="Prerendered PWA Test" />
    <meta property="og:url" content="http://www.modern-matchmaker.com//" />
    <link rel="canonical" href="http://www.modern-matchmaker.com//" />
<!-- %%-PRERENDERING-HEADOUTLET-END-%% -->
jsakamoto commented 1 year ago

@drma-dev It looks good, doesn’t it?

drma-tech commented 1 year ago

Yep