Introduction

BitzArt.Blazor.State is a Blazor library that allows persisting your Blazor components' state across rendering environments.

How it works

When using one of Blazor's interactive render modes with prerendering enabled, you will have your page rendered twice:

Step 1: Prerender

Firstly, the server will prerender the page and send the prerendered version to the client. The prerendered page contains the HTML and also all the necessary assets (such as JS, CSS, etc.) to proceed with the following steps.

Step 2: Render

After the prerendered page is loaded, it will be rendered again. This time, the page will be rendered interactively - meaning that the user will be able to interact with the page after it is rendered.

This step happens on the server if you are using the InteractiveServer render mode, or on the client (using webassembly) if you are using the InteractiveWebAssembly render mode.

The problem

The problem with all this is that the state of your components is lost between the prerender and the render.

This means that if your page contains some state, it will be lost when the page is rendered for the second time - which implies initializing the page twice (which may include making WebAPI calls or other expensive operations).

The word "state" here may refer to any kind of data your components posess, including but not limited to:

  • Data fetched from a WebAPI
  • Data that is expensive to compute
  • etc.

The solution

BitzArt.Blazor.State provides a way to persist your components' state across the prerender and render steps. This way, you can avoid initializing your components' state twice. It works by persisting the state of the page after it has been prerendered and restoring it when the page is rendered for the second time.

Getting Started

Refer to the Getting Started section to learn how to use this library in your Blazor applications.