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

Viewed 14842

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?

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.

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.

Related