Razor Pages vs server-side Blazor

15
votes

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.

4
c#razorblazor
Does this answer your question? Blazor vs Razor – Flores
@Flores almost, but not quite. That post, like most others, primarily address Razor vs. client-side Blazor (SPAs). In that scenario, the differences are quite obvious. My confusion only begins once the topic falls on server-side Blazor (although the answers below have certainly helped my understanding). I do appreciate it though and it was deffinitely worth a read :-) – Jakob Busk Sørensen
hanselman.com/blog/what-is-blazor-and-what-is-razor-components – Amjad
espressocoder.com/2019/02/21/… – Amjad

4 Answers

16
votes

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.

17
votes

Biggest difference is that razor pages renders on the server and sends whole pages to the client. Blazor server-side only sends the DOM changes over a signalr connection. So there are no page reloads. You need asp.net core running on the server for this technique.

Blazor webassembly is totally client side. Changes to the DOM are applied 'locally', this can be hosted from a static webserver.

3
votes

But what is the difference between Razor Pages and Razor components?

Blazor has some confusing naming issues.

Blazor is not Razor but Blazor pages/components are packed in .razor files. Razor uses .cshtml files.

Blazor components can be used on a Razor page.

Blazor server side was briefly named "Razor Components" but that was rolled back.

I am simply trying to figure out which technical differences there are.

Razor pages are a lightweight MVC branch that generates HTML on the server.

Blazor is a component framework that can run directly in the Browser (WebAssembly) or run on the server. In both cases it renders small updates to the Browser DOM.

3
votes

First off, it should be mentioned here that the Component Model of Blazor Server App and Blazor WebAssembly App is one and the same. The only difference is their mode of executions. Blazor Server Apps, also known as server-side Blazor Apps are executed on the server, and the Html content yielded from such execution after, say, a user had clicked a button element, is send to the client (perhaps a browser) over a SignalR connection. Blazor WebAssembly Apps, also known as client-side Blazor Apps, on the other hand, are executed on the user's browser; that is C# code is running on the browser within a process at the end of which Html content is output and rendered in the browser.

But what is the difference between Razor Pages and Razor components?

Razor Components is the Component Model used in both mode of executions of Blazor. A component is a unit of code that usually derives from the ComponentBase class. It may contain two parts: view part which is made of Html markup mixed with Razor syntax, and code part which is C# code. A component can be a child component of another component, but it can be a Page Component; that is a component which, when rendered, constitutes a whole Html Document.

Razor Pages is a web framework, just like the MVC framework. When you use Razor Pages, you create pages that employ Razor syntax and C#, just like Blazor, which explains why they seem so similar, at first glance. However, Razor Pages are created on the server only, and the Html Content is output (rendered) and pushed to users' browser. Their architecture is different, and you need to learn a range of classes in order to program in either of them. To sum up, the only similarity is the employment of the Razor syntax and C# . Language is the source of misunderstanding, and more than ever, in the world of programming, it is exemplified by the naming of Blazor (naming changes occurred several times) and unwittingly identifying it with Razor Pages. Adding to this the fact that you can embed Razor Components in Razor Pages seems to be the source of further confusion.