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?

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 cshtmlfile (template) plus acs` 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 tipically 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.

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.