Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between RenderMode.Server and RenderMode.ServerPrerendered in blazor?

What's the difference between

@(await Html.RenderComponentAsync<Todo>(RenderMode.ServerPrerendered))

and

@(await Html.RenderComponentAsync<Todo>(RenderMode.Server))

I was looking into the documentation but couldn't really find something that explains the difference. and also don't really understand the code comments over the enum stating:

    // Summary:
    //     Renders a marker for a Blazor server-side application. This doesn't include any
    //     output from the component. When the user-agent starts, it uses this marker to
    //     bootstrap a blazor application.
    Server = 2,
    //
    // Summary:
    //     Renders the component into static HTML and includes a marker for a Blazor server-side
    //     application. When the user-agent starts, it uses this marker to bootstrap a blazor
    //     application.
    ServerPrerendered = 3

What is happening behind the scenes? And what are the Scenarios for using Server vs ServerPrerendered?

like image 852
gsharp Avatar asked Oct 04 '19 03:10

gsharp


People also ask

What is the difference between Blazor server app and Blazor WebAssembly app?

Blazor Server apps have direct access to server and network resources where the app is executing. Because Blazor WebAssembly and Blazor Hybrid apps execute on a client, they don't have direct access to server and network resources.

What is render mode in Blazor?

The rendering mode determines how the component gets rendered on the page. It configures whether the component is prerendered into the page or not and whether it simply renders static HTML on the page or if it includes the necessary information to bootstrap a Blazor application from the user agent.

Can you mix Blazor and razor?

Razor components can be integrated into Razor Pages and MVC apps in a hosted Blazor WebAssembly solution.

Is Blazor a SSR?

Blazor has two flavours, Blazor WebAssembly and Blazor Server. Both are used to create SPAs (which are a type of application) and both can be configured to use SSR (which is a technology).


2 Answers

Explained at ASP.NET Core and Blazor updates in .NET Core 3.0 Preview 9:

  • Static Statically render the component with the specified parameters.
  • Server Render a marker where the component should be rendered interactively by the Blazor Server app.
  • ServerPrerendered Statically prerender the component along with a marker to indicate the component should later be rendered interactively by the Blazor Server app.

This concept is related to performance. The fastest way to serve a page is to render page statically then send, and, the slowest way to serve a page is to serve an "interactive Blazor" server page (with a live virtual DOM synchronized via SignalR websockets).

ServerPrerendered is a trade-off: Blazor pre-renders page and sends it as a static page, then later the page becomes an interactive Blazor server app. This behavior is intended to serve pages quickly to search engines with time-based positioning.

like image 56
dani herrera Avatar answered Sep 25 '22 19:09

dani herrera


The main problem with ServerPrerendered is that it loads twice ,so your data layer code is also executed twice. Server mode is just ok, may be a bit slower.

like image 40
alekoo73 Avatar answered Sep 22 '22 19:09

alekoo73