Migrate from Blazor Web Assembly to Blazor Server

Enrico Rossini 196 Reputation points
2023-10-15T22:40:16.76+00:00

I'm building a website with Blazor Web Assembly hosted in ASP.NET Core (NET7). The website is a project for the university that is basically an online magazine. There will be new content and I want to use SEO in order to have visibility in the search engine. I have created a few components that are working.

At the moment, my project has the classic structure:

  • Server (ASP.NET Core project)
  • Client (Blazor Web Assembly)

The Server uses the Individual Identity based on the Identity Server that Microsoft offers out of the box. Plus, I added all the secure headers and Content-Security-Policy.

In the Client, I have already created a few pages that use all the components I created. Also, I created the components for the design in a Razor Library and a few of them are using JavaScript (and I wrote the JSInterop for them).

Because the website needs to be indexed by Google and other search engines and also shows advertisements, I read in a few posts online that it definitely not the best way to build the website with Blazor Web Assembly. I like the idea of having a PWA for the website. One feature I want to keep is the search. Some content on every page changes based on the user customisation like the language.

The main issue is that the browser can't see all the pages on the website but only the classic error message and a bit more from the index.html. Although it is possible to add in the head of a rendered page some meta tags, search engines are not able to index all the pages.

So, I started to look online for some how-to or tutorials. I found this post Enabling prerendering for Blazor WebAssembly apps but he migrated a brand new Blazor WebAssembly to a Server. From a brand new Blazor Web Assembly project, here are the steps to convert it into a Blazor Server.

  1. Add _Host Page, dotnet new page -o Pages -n _Host --no-pagemodel
  2. Copy Client/wwwroot/index.html into it, keeping @page at the top
  3. Add tag helper, @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  4. Replace <div id="app"> with <component type="typeof(BlazorApp1.App)" render-mode="WebAssemblyPrerendered" />
  5. Remove builder.RootComponents.Add<App>("#app") from Program.cs
  6. Add an HTTP client to the server, e.g. services.AddSingleton<HttpClient>.

After that, I get a lot of errors plus I have to add the code for the Individual Identity and the security from the Server project.

I read it is possible to use some online services to cache the website like prerender.io but pricy or generate the HTML pages from the website using for example react-snap. I can't afford the first solution and I don't like the second because there is no interaction with the user.

What I realized at this point is that I prefer to move to Blazor Server because:

Here are my questions:

  • Is Blazor Server the right decision to build the application?
  • Should ASP.NET Core MVC be a better option?
  • How can I convert a Blazor Web Assembly in a Blazor Server?
  • Do I have to rewrite my components?
  • Is there anything else I have to consider that I missed to mention?
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,573 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,584 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,494 questions
{count} vote

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 65,576 Reputation points
    2024-09-12T15:37:20.7966667+00:00

    with Blazor, a web crawler like google will only see the pre-render page content. Be sure the pre-render included what you want crawled. You can test by viewing the site with javascript disabled in the browser.

    https://zcusa.951200.xyz/en-us/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-7.0&pivots=server

    Blazor server requires a continuous connection from the server to the client. so more server resources will be required to host the application. Lost/reconnection issues are common with mobile devices.

    if your application is basically an html viewer, than razor page (or mvc) might be a better choice. Blazor is a SPA platform. and designed for highly interactive sites.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.