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 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.