SSR with Vue requires javascript enabled? #39

New Issue

fergalmoran · 2025-08-09T17:14:46Z

fergalmoran commented

2025-08-09 17:14:46 +00:00

Originally created by @selaromdotnet on 6/10/2018

I'm a bit new to this area, so forgive me if I'm missing something obvious...

I'm attempting to setup a Vuejs project with aspnet core, using Server Side Rendering so that the app can load, even if JS is disabled, as well as for SEO purposes.

I posted my original question on SO here: https://stackoverflow.com/questions/50746185/server-side-rendering-vue-with-asp-net-core-2

but the gist is that I added the JavaScriptServices and I am able to get the server side to render some html, but rather than putting into the main

of the Html for the app, it's putting it into a JavaScript element below that div, and expects JavaScript to execute to load the result into the DOM.

This seems counter-intuitive to the point of SSR, so I'm assuming I'm doing something wrong. As described in the SO post above, I eventually debugged the source, and see that the line from PrerenderTagHelper

output.Content.SetHtmlContent(result.Html);

has a null value for result.Html, but the Html IS in the Globals json object, so it does appear to be rendered...

Two issues then remain:

How do I get the HTML from the Globals into the actual rendered HTML output sent to the browser from this tag helper?
I attempted to force it to load during debugging by copying the Html into the result.Html value, and even tried just putting dummy text in there to see if it would render, but the resulting page still has an empty div for the main app.

I do have a sample project that demonstrates the issue here: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr

if you run it, you'll see the resulting HTML in the JS below the div, but unless JavaScript is enabled, it won't get injected into the dom.

Am I missing a step? What more can I provide to help find a resolution?

*Originally created by @selaromdotnet on 6/10/2018* I'm a bit new to this area, so forgive me if I'm missing something obvious... I'm attempting to setup a Vuejs project with aspnet core, using Server Side Rendering so that the app can load, even if JS is disabled, as well as for SEO purposes. I posted my original question on SO here: https://stackoverflow.com/questions/50746185/server-side-rendering-vue-with-asp-net-core-2 but the gist is that I added the JavaScriptServices and I am able to get the server side to render some html, but rather than putting into the main <div id="app"></div> of the Html for the app, it's putting it into a JavaScript element below that div, and expects JavaScript to execute to load the result into the DOM. This seems counter-intuitive to the point of SSR, so I'm assuming I'm doing something wrong. As described in the SO post above, I eventually debugged the source, and see that the line from [PrerenderTagHelper](https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs) ` output.Content.SetHtmlContent(result.Html);` has a null value for result.Html, but the Html IS in the Globals json object, so it does appear to be rendered... Two issues then remain: 1. How do I get the HTML from the Globals into the actual rendered HTML output sent to the browser from this tag helper? 2. I attempted to force it to load during debugging by copying the Html into the result.Html value, and even tried just putting dummy text in there to see if it would render, but the resulting page still has an empty div for the main app. I do have a sample project that demonstrates the issue here: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr if you run it, you'll see the resulting HTML in the JS below the div, but unless JavaScript is enabled, it won't get injected into the dom. Am I missing a step? What more can I provide to help find a resolution?

fergalmoran closed this issue

2025-08-09 17:14:46 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#39