In the menu of visual studio, there are two options, <code>Razor Component</code>, and <code>Razor Page</code>, If one adds <code>@page</code> directive on the top of the razor component, it has its own address. So what is the difference between them in practice? <img src="https://i.stack.imgur.com/2NydP.png" alt="enter image description here">

<h3>Introduction</h3> When you start a dotnet web app, you can choose between several types of apps, among them, mvc, webapp and Blazor: <pre class="prettyprint lang-sh prettyprint-override"><code>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 ... </code></pre> If you create a <code>webapp</code> you can see razor pages: <pre class="prettyprint lang-sh prettyprint-override"><code>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 ├── ... </code></pre> Quoting Introduction to Razor Pages in ASP.NET Core: <blockquote> Razor Pages can make coding page-focused scenarios easier and more productive than using controllers and views. </blockquote> As you can see on tree structure, a razor page is a cshtml<code>file (template) plus a</code>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: <blockquote> Blazor is a framework for building interactive client-side web UI with .NET </blockquote> 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) <h3>Razor Component vs Razor Page</h3> <ul> <li>Razor page is tipically to generate an html page on server and send to client on a ASP.NET Core Web App</li> <li>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.</li> </ul> <h3>Notes</h3> <ul> <li>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.</li> <li>Razor components vendors named this components as "Blazor Components" : https://www.syncfusion.com/blazor-components , https://www.telerik.com/blazor-ui, ...</li> <li>Notice that when you add <code>@page</code> directive to a Blazor component it becomes enroutable (like a "blazor page"), but it is still a component.</li> <li>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.</li> </ul>

Razor Component is the illogical template name for a Blazor Component, in a <code>.razor</code> file. A Blazor Page is a Blazor Component (.razor) that has a <code>@page "/..."</code> directive. Note that the icons are correct. Just go for the purple Bl@zor thing.

Razor Component vs Razor Page

Video Answer

2 Answers

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)