Razor Component vs Razor Page

Question

In the menu of visual studio, there are two options, Razor Component, and Razor Page, If one adds @page directive on the top of the razor component, it has its own address.

So what is the difference between them in practice?

Hochman

Answer 1

Introduction

When you start a dotnet web app, you can choose between several types of apps, among them, mvc, webapp and Blazor:

dani@localhost ~ $ dotnet new
Templates                                         Short Name               Language          Tags                  
--------------------------------------------      -------------------      ------------      ----------------------
Razor Page                                        page                     [C#]              Web/ASP.NET           
...
Blazor Server App                                 blazorserver             [C#]              Web/Blazor            
Blazor WebAssembly App                            blazorwasm               [C#]              Web/Blazor/WebAssembly
...
ASP.NET Core Web App (Model-View-Controller)      mvc                      [C#], F#          Web/MVC               
ASP.NET Core Web App                              webapp                   [C#]              Web/MVC/Razor Pages   
...

If you create a webapp you can see razor pages:

dani@localhost pp2 $ tree
.
├── appsettings.Development.json
├── appsettings.json
├── obj
│   ├── ...
├── Pages
│   ├── Error.cshtml                <-- Razor Page
│   ├── Error.cshtml.cs             <-- Razor Page
│   ├── Index.cshtml
│   ├── Index.cshtml.cs
│   ├── Privacy.cshtml
│   ├── Privacy.cshtml.cs
│   ├── Shared
│   │   ├── _Layout.cshtml
│   │   └── _ValidationScriptsPartial.cshtml
│   ├── _ViewImports.cshtml
│   └── _ViewStart.cshtml
├── ...

Quoting Introduction to Razor Pages in ASP.NET Core:

Razor Pages can make coding page-focused scenarios easier and more productive than using controllers and views.

As you can see on tree structure, a razor page is a cshtml file (template) plus a cs file (behavior). The page is rendered as html and send to navigator.

Exists another kind of apps, blazor. Quoting Introduction to ASP.NET Core Blazor:

Blazor is a framework for building interactive client-side web UI with .NET

Important term "interactive", not only render html, is a language to make page interactive (no just render html on server and send it to client)

Razor Component vs Razor Page

• Razor page is typically to generate an html page on server and send to client on a ASP.NET Core Web App
• Razor component ("Blazor Component") is a component for a Blazor app (can run in Blazor Server App and also in Blazor WebAssembly App) intended for interactive usage.

Notes

• Check Henk's answer below, the term "Razor Component" has no logic, in Henk's opinion (and mine) should be "Blazor Component" because it runs only on Blazor apps.
• Razor components vendors named this components as "Blazor Components" : https://www.syncfusion.com/blazor-components , https://www.telerik.com/blazor-ui, ...
• Notice that when you add @page directive to a Blazor component it becomes enroutable (like a "blazor page"), but it is still a component.
• You can add both Razor Components ("Blazor Components") and Razor pages to a webapp: Using Blazor Components In An Existing MVC Application by Chris Sainty.

Idiosyncrasy

thank you for your answer completion with other answers. I cant find g.cs in my debug output project, I'm using .net 5.0 – Hochman

@HappyDeveloper With file explorer, in your project folder, check into obj/Debug/Razor/... – Idiosyncrasy

I've created an empty razor page, and there is no Microsoft.AspNetCore.Components.ComponentBase in its g.cs file.. @dani – Hochman

public class Pages_Test : global::Microsoft.AspNetCore.Mvc.RazorPages.Page – Hochman

Check answer: "But your assistant is talking about a Razor page (not enroutable Blazor component). Razor page is part of Model-View-Controller MVC architecture." – Idiosyncrasy

so what do you mean by blazor page( which is the same as blazor component)? – Hochman

@HappyDeveloper. I mean that a blazor page is a blazor component with @page directive, because this, blazor page is still a blazor component, if you check g.cs you can see a blazor component with a page directive still inherits from ComponentBase. You should to diferenciate between blazor page ( blazor architecture) and razor page (MVC architecture) – Idiosyncrasy

so please delete or move your first line (because it is not my question and it makes your answer ambiguous) then i accept your answer – Hochman

I will rewrite the whole answer to clarify and match the question. – Idiosyncrasy

Answer 2

Razor Component is the illogical template name for a Blazor Component, in a .razor file.

A Blazor Page is a Blazor Component (.razor) that has a @page "/..." directive.

Note that the icons are correct. Just go for the purple Bl@zor thing.

Yasminyasmine

no we can add @page to razor component. and in my visual studio, blazor page is created with .cshtml – Hochman

No, Razor pages are placed in .cshtml and can (must) have an @page without a route. – Yasminyasmine

@HappyDeveloper, I guess that what Henk says is the term "Razor Component" exists (also present on MS docs) but the term has no logic, the right name maybe "blazor component". All components vendors and projects are referring to components as "Blazor Components". – Idiosyncrasy

Answer 3

Here's a comparison of the features between the two:

	Razor Page	Razor Component
Page Model	You can define page @model, strongly typed view	Can't define @model-- but you can define multiple classes in @code{} block then bind to your html elements
Event handling	Comes with .cs file where you can define OnGet, OnPost http events-- but these events by default will require page reload	You can use the @code{} block to handle page events; OnClick, OnInitialize, OnParameterSet, OnAfterRender-- events like OnClick doesn't require page reload
@code block	code block is only ran upon page render	code block can be used throughout the page life cycle depending on the events you defined (OnClick, OnKeyDown, etc)

Seriatim