Razor Pages vs server-side Blazor

Question

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.

Narah

Does this answer your question? Blazor vs Razor – Poppy

@Poppy 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 :-) – Medardas

hanselman.com/blog/what-is-blazor-and-what-is-razor-components – Proposition

espressocoder.com/2019/02/21/… – Proposition

Answer 1

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.

Haematocryal

Could you clarify on the difference between a Razor Component and the PageModel used by RazorPages? – Medardas

"Razor Components are available from .NET Core 3.0 onwards"... Are you sure about this ? As what you're saying is completely wrong. – Invar

"Whereas Razor Components have the .cs and HTML in a single file"... You're wrong here as well. A Razor Component can contain two parts: the view part which is made of Html markup mixed with Razor syntax, and a code part (@code block). But the Razor component, just like Razor Pages can be separated into two parts: view part (.razor) and code part or code behind, if you wish (.razor.cs). I may also add that this is done with the use of the partial key word... – Invar

@Invar Thanks for the heads-up. I've edited the answer regarding Razor Components being split between files. As for the .NET Core 3.0 onwards I still believe that is correct. Razor Components are part of Blazor which was made available in .NET Core 3.0. Please let me know if you think they were available in an earlier version – Haematocryal

Components are available in Blazor from the very beginning, no matter what name used to refer to them... However, the following is from the docs: A component in Blazor is formally referred to as a Razor component – Invar

Answer 2

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.

Poppy

Answer 3

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.

Preeminent

Answer 4

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.

Invar