Blazor-Web-Initializers comment is not added to the DOM by blazor.web.js when the page is using SSR and the page is cached using Cloudflare

[Florin Paraschivescu]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I have an web application (v8.0.5) in which I use pages rendered using SSR and pages using InteractiveServerRenderMode.
Let's consider these pages:

• /test-1 -> using SSR
• /test-2 -> using InteractiveServer
• /test-3 -> using SSR

In Test1.razor page I have the component from here.

@if (RenderModeForPage is null)
{
    <PageScript Src="./Pages/Test1.razor.js"></PageScript>
}

In Test1.razor.js I have:

import { myTest as myTest  } from "/js/modules/helperFunctions.js";

export function onLoad() {
    myTest .init();
    console.log(1);
}
export function onUpdate() {
    myTest .init();
    console.log(2);
}

export function onDispose() {}

All good until here. Than the /test-1 page was added to be cached by CloudFlare for 2 min, and after some testing, switch between pages, go from /test-1 to /test-2 than press the browser back or press F5 (refresh in /test-1) the PageScript failed to load my js file: ./Pages/Test1.razor.js until the CloudFlare cache expired or so.

Digging into this, I've found that the PageScript is loaded by the file TestApp.lib.module.js which is loaded by the blazor.web.js file ONLY if this comment is present into the DOM:

Encoded using Base64
<!--Blazor-Web-Initializers:WwogICJqcy9UZXN0QXBwLmxpYi5tb2R1bGUuanMiCl0=-->;

Decoded using Base64
<!--Blazor-Web-Initializers:["js/TestApp.lib.module.js"]-->;

I don't know why this comment failed to be added but this what's happening. The only way for me to deal with this issue was to create a JS function:

<script type="text/javascript">
    function ensureBlazorInitializer() {
        const initializerComment = "Blazor-Web-Initializers:WwogICJqcy9UZXN0QXBwLmxpYi5tb2R1bGUuanMiCl0=";
        const html = document.documentElement.outerHTML;
        const encodedComment = `<!--${initializerComment}-->`;

        // Check if the comment already exists in the HTML
        if (html.includes(encodedComment)) {
            //console.log("Initializer comment already exists.");
        } else {
            //console.log("Initializer comment does not exist, adding now.");
            // Create a comment node
            const comment = document.createComment(initializerComment);
            // Append the comment to the body or head of the document
            document.body.appendChild(comment);
        }
    }
    
    // document.addEventListener("DOMContentLoaded", ensureBlazorInitializer);

    // FYI -> in App.razor -><script autostart="false" src="_framework/blazor.web.js"></script>
    (() => {
       ensureBlazorInitializer();

       Blazor.start({
            ssr: {
                // disableDomPreservation: true
            }
        });
    })();
</script>

I wasn't able to see issue happening on pages that are NOT cached using CloudFlare.

Expected Behavior

I expect that the file ./Pages/Test1.razor.js to be loaded each time when the /test-1 url is loaded / re-loaded.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

8.0.5

Anything else?

No response