seo Question posted in
Some basic information to get you started with this can be found here.

Seo – How can we host Blazor Server Side and Web Assembly together as one application?

Need some help here.
So we are in process to take Blazor as our front-end framework but I am stuck on a very small thing.
First here is the requirement:

  1. We need a SSR website, where we can show the list of the products and their details etc. It should be SSR for the SEO purpose.
  2. We need a backend management app, on which we can build a backend app where users can add/edit/delete the products.

The thing we wanna build is

  1. On root URL, we need all the SSR content like www.example.com, www.example.com/product/xyz. All pages will be SSR. I believe we can handle this by making Blazor Web App (Server) and use the SSR interactive mode.
  2. The issue comes here. We want to access the backend web assembly app on the URL www.example.com/app. The app should be loaded when we call this URL and everything should just work under this app. Is this possible?

Any help or tutorial will be highly appreciated.

J

Tags:

2

Answers


  1. 0

    To achieve your requirements, here are some ideas:

    1. Configure Both Rendering Modes:

    Start by setting up a Blazor Web App project in Visual Studio. Ensure you enable interactive rendering per page or component. This configuration will allow you to leverage both Server-side rendering (SSR) and WebAssembly for specific components or pages.
    Note: If project is created, you can change program.cs config to allow this.

    1. Project Structure:

    This setup will create two projects:

    • The first proyect configured for Server-side rendering. This will handle all SSR content, such as www.example.com and www.example.com/product/xyz.

    • A secondary project for Client-side WebAssembly (often ending with .Client), allowing you to render components as WebAssembly for dynamic or interactive parts.

    1. Use Two Layouts:
    • Server-side Layout:
      One layout will host the Server-side components and serve content rendered on the server, e.g., the pages under http://www.example.com/product.
    • WebAssembly Layout: A second layout will handle everything under /app. This layout will load and use the WebAssembly-based app and its components.
    1. SSR Components:
      For SSR components, you can add them to any layout without specifying a render mode explicitly—they will default to static rendering. For
    Login or Signup to reply.
  2. 0

    If I read your requirements correctly, you should be able to do as you wish using the current Template.

    Deploy a solution using the Blazor Web App template. Select Interactive Auto and Per Page/Component interactivity.

    This makes:

    1. Home – an SSR page
    2. Counter – an Auto Interactive page
    3. Weather – a static Streaming page

    Change Counter to this. It’s now InteractiveWebAssembly so we have no confusion, and the need to deal with both Server and WASM rendering of the page.

    @page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

@if(!this.RendererInfo.IsInteractive)
{
    <div>Loading Web Application....</div>
    return;
}
<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<div class="bg-dark text-white m-2">
    <pre>Interactive: @this.RendererInfo.IsInteractive</pre>
    <pre>Type: @this.RendererInfo.Name</pre>
</div>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Add this to Home and Weather so you can see their render information:

    <div class="bg-dark text-white m-2">
    <pre>Interactive: @this.RendererInfo.IsInteractive</pre>
    <pre>Type: @this.RendererInfo.Name</pre>
</div>

    What you end up with is an application where App, Router and Layout are rendered on the server, and the Page content is rendering according to it’s setting. The WebAssembly SPA session remains active [once loaded] until you navigate away, or reset with an F5.

    There’s a Repo here: https://github.com/ShaunCurtis/SO79308298

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search