Exploring Static Server Side Rendering (Static SSR) in .Net 8.0 Blazor


Just imagine the world of blazor web development where interactivity takes a backseat and static comes into power. You might be thinking how is that possible? Don't worry; dot by dot we will connect the narrative.


Use case Scenario for Static SSR

Let's see the scenario to clarify where we can use static SSR neglecting interactivity:


Content-based websites: Blogs, Portfolios, Landing Page, Company’s Website. They have static content as the information does not change frequently. No real-time dynamic updates are required.


Dive into the characteristics of Static SSR

  • By default static render mode works. Static server rendering is used when components do not need interactivity. There are no dynamic interactions.

  • When an HTTP request occurs, it is handled at the server, and the response is generated as complete static HTML on the browser.

  • When a response is sent, the server discards the component state. There is no need for a continuous web socket connection between the browser and server. It works without a SignalR connection.

  • Static SSR requires no web assembly payload, so no web assembly resources are downloaded. No client interactivity is enabled for this mode.


Unpacking the benefits of Static SSR

  • No continuous web socket connections are required.

  • No Web assembly resources are needed in the browser.

Working of Static SSR

Now let's see the working of Static SSR in Visual Studio 22 using .Net 8.0 Blazor.

Setting up the Project

  1. Create a new project and select the Blazor web app project.

    2. 1

  2. Give a name to your project and location and click next.

  3. Then, in additional information, there are 4 options for Interactive render mode. Select None as we want to use static SSR.

    4. 1

  4. Select Interactivity location. Select Global if you want to apply the static or interactivity in the whole project and if per components specification is needed then select per page/per component.

    5. 1

Program.cs file overview

In program.cs you will find the following service and endpoint. Static SSR needs these two calls to work.


1

1

Create Product Razor component

  1. Let's create a razor component named Product.razor in the subfolder “Pages” under the folder of “Components”.

  2. This component will contain a code to calculate the product of two numbers.

    3. 1

  3. Now let's run the code.

    4. 1

  4. You will see when the button is clicked, it shows no result. The reason is that there is no interactivity enabled. So, the purpose of showing you this example is only to use the Static SSR when users are not expecting to interact with buttons and other interactivity.

Inspecting the browser

Let's inspect the page and see that web sockets and web assembly are not being used.



1



1