Server side rendering does not complete; I'm left with html with the placeholders and no functionality.

[MarkStega]

Describe the bug

I have migrated my application to Preview 9. When it executes client side it all works. When executing server side with a Render mode of Server or ServerPrerendered I get no interactivity with my component. With Server I end up seeing the placeholder in the html with an empty browser window, with ServerPrerendered I do see the opening page of my app, but the prerender placeholder is still in the html.

To Reproduce

Steps to reproduce the behavior:

1. Clone the repository at https://bitbucket.org/MarkStegaOHI/blazor-cse-sse/src/master/
2. Pick the configuration Debug-CSE
3. Build & run with Optimiser.Web as the startup project
4. You can pick menu items and navigation occurs
5. Pick the configuration Debug-SSE
6. Do the same build & run
7. The html has the pre-render placeholders and the application has no interactivity

Expected behavior

I'd expect that server-side runs would work just as client side does..

Screenshots

n/a

Additional context

C:\Users\ms>dotnet --info
.NET Core SDK (reflecting any global.json):
 Version:   3.0.100-preview9-014004
 Commit:    8e7ef240a5

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.18362
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.0.100-preview9-014004\

Host (useful for support):
  Version: 3.0.0-preview9-19423-09
  Commit:  2be172345a

.NET Core SDKs installed:
  2.1.801 [C:\Program Files\dotnet\sdk]
  2.2.401 [C:\Program Files\dotnet\sdk]
  3.0.100-preview9-014004 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0-preview9.19424.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0-preview9-19423-09 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.0.0-preview9-19423-09 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download

C:\Users\ms>

[mkArtakMSFT]

Thanks for contacting us.
We can't debug your application. Please provide a minimalistic repro app for us to investigate.
As a side question, make sure that the blazor.server.js script is loaded.

[MarkStega]

The repo is a minimalistic repro; What issue are you having with debug? I don't need help debugging the app, just understanding why it never gets rendered. Browser dev tools show that blazor.server.js is getting loaded.

[tomRedox]

I've got a similar issue since switching to Preview 9. I've followed the steps in Dan's blog post to upgrade to Preview 9 and I'm now getting this behaviour:

My solution is comprised of:

• a server-side Blazor project
• an MVC project that has components from the Blazor project rendered on both Razor and MVC pages.

If I set the startup project to the Blazor project all is well and all the Blazor components work correctly. If I set the startup project to the MVC project and use this syntax to render the component:

@(await Html.RenderComponentAsync<BillOfLadingWizard>(RenderMode.Server))

I get the following results:

• RenderMode.Server - placeholder only, component not rendered
• RenderMode.Static - component only, but no interactivity
• RenderMode.ServerPrerendered - placeholder and component rendered, but no interactivity

The placeholder looks like this:

<!--Blazor:{"sequence":0,"type":"server","prerenderId":"c986dc93784b492c846ec228802a5062","descriptor":"CfDJ8I9xuMXwqelDv4kD0-aXrwZkgaADRefu6bCKw_y68MHeLeqP3YcF1eMCxObZIDfaehr4iSW5rXgJoiDvNlrpd0QhtgZnSb7HQ911Pv_K-tnBp_h8QMtnuXKeNdqk7XTcB9orIzDZsiLywVuA8Lg8sK01EGvxvgjcR_oJjI2iDsU31FS9IhbRU03glNNVML4X2yRD0PEeLk897nNRddnchnbk-huhSpkkJGpaQn1WHiqqApJROLDv_euWN0luPwlGEb57xYnOWCsmXhVioMLeIdOsxDd7KP2lcMer-bbIa0le7KofzoScP8EEcu6sETgit2UACJnJfENpX1czrB6Munw"}-->

What's weird is that I have no compiler errors and no console errors

Like @MarkStega I can see from Chrome's DevTools that blazor.server.js is loaded in the _framework folder.

My console shows:

[2019-09-06T16:39:44.863Z] Information: Normalizing '_blazor' to 'https://localhost:44341/_blazor'.
[2019-09-06T16:39:45.048Z] Information: WebSocket connected to wss://localhost:44341/_blazor?id=wmoGYR8V6vVKehh5692tmA.

[Dimexoid]

Spent some time, but found a solution that worked for me:
I created a new Blazor server app just to steal some code from it.

Just copied _Imports.razor to my project (with changes in namespaces), and used the code from _Host.html to render my Blazor component.
All events work now.

P.S. Still disapointed by the fact I cannot pass parameters to it anymore.

[MarkStega]

@JonasGo4 found the issue; Up until P9 the following snippet of code in _Host.cshtml worked:

<body>
    <!-- SSE -->
    <script src="_content/GeneralComponents/GeneralComponents.DOMHelpers.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <app></app>
</body>

I just added the @(await snippet into the app . The issue is the placement of the script includes; Changing to

<body>
    <!-- SSE -->
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.Server))
    </app>
    <script src="_content/GeneralComponents/GeneralComponents.DOMHelpers.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>

resolves the issue

[tomRedox]

@JonasGo4's solution fixed it for me too. In my case I needed to move the scripts in the _Layout.cs file to after @RenderBody() in my MVC project:

  <div class="am-content">
    @RenderBody()
  </div>

  <partial name="_RightSideNavPartial" />
  </div>
    
  @* this must be after the rendering of the Blazor component on the page *@
  <script src="_framework/blazor.server.js"></script>

[mkArtakMSFT]

Thanks for contacting us. We believe that the question you've raised have been answered. If you still feel a need to continue the discussion, feel free to reopen it and add your comments.