Search code examples
c#razorblazor

Razor Pages vs server-side Blazor


Razor Pages is used for server side web applications, just like in the good old days.

Blazor is aiming to provide an alternative to popular JavaScript frameworks (like Angular or React), to create Single Page Applications (SPAs) which runs (mainly) in the clients browser.

However, I have also heard about server-side Blazor, which kind of confuses me. According to this answer, server side Blazor is just Razor Components running on the server. But what is the difference between Razor Pages and Razor Components?

Note: I am not trying to figure out which is better or "the right choice". I am simply trying to figure out which technical differences there are.


Solution

  • Razor Components, as they are named, are for creating reusable components for web pages.

    Razor pages are the combination of a web page and a controller in a single file.

    Razor components are primarily used by Blazor but they can also be used within Razor Pages, although they are designed to be more native to Blazor.

    You can't display a Razor Component without a page to host it, but you can display Razor Pages without Razor components.

    Razor Components are available from .NET Core 3.0 onwards.

    Razor Pages are available from .NET Core 2.1 onwards.

    EDIT

    RazorPages are split between an HTML page and a .cs code file. Whereas Razor Components usually have the .cs and HTML in a single file, although they can be separated into HTML and a Code Behind file.

    The PageModel for a Razor Page allows ASP.NET Core to bind the data returned by the controller to a public property in the page and then use that property within your page to reference the model. You use the property in the PageModel class to reference the data in the code and use the @model property within the HTML to reference the same properties.

    Razor Components do not bind to a model but you assign values to them using parameters, similar to how you assign values and events to a standard HTML element. An example of this can be seen here.