dotnet · guardrex · Sep 27, 2023 · Sep 14, 2023 · Sep 27, 2023 · Sep 27, 2023
@@ -16,6 +16,8 @@ This article explains how to create and use Razor components in Blazor apps, inc
 
 Blazor apps are built using *Razor components*, informally known as *Blazor components* or only *components*. A component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior. Components can be nested, reused, shared among projects, and [used in MVC and Razor Pages apps](xref:blazor/components/prerendering-and-integration).
 
+Components render into an in-memory representation of the browser's [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) called a *render tree*, which is used to update the UI in a flexible and efficient way.
+
 ## Component classes
 
 Components are implemented using a combination of C# and HTML markup in [Razor](xref:mvc/views/razor) component files with the `.razor` file extension.

@@ -112,6 +112,12 @@ The Blazor script handles:
 * Downloading the .NET runtime, Razor components, and the component's dependencies.
 * Initialization of the runtime.
 
+The size of the published app, its *payload size*, is a critical performance factor for an app's usability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times:
+
+* Unused code is stripped out of the app when it's published by the [Intermediate Language (IL) Trimmer](xref:blazor/host-and-deploy/configure-trimmer).
+* HTTP responses are compressed.
+* The .NET runtime and assemblies are cached in the browser.
+
 The Blazor WebAssembly hosting model offers several benefits:
 
 * For standalone Blazor WebAssembly apps, there's no .NET server-side dependency after the app is downloaded from the server, so the app remains functional if the server goes offline.
@@ -431,26 +437,3 @@ Blazor Hybrid apps are native client apps that typically require an installer an
 To set a component's hosting model to Blazor Server or Blazor WebAssembly at compile-time or dynamically at runtime, you set its *render mode*. Render modes are fully explained and demonstrated in the <xref:blazor/components/render-modes> article. We don't recommend that you jump from this article directly to the *Render modes* article without reading the content in the articles between these two articles. For example, render modes are more easily understood by looking at Razor component examples, but basic Razor component structure and function isn't covered until the <xref:blazor/fundamentals/index> article is reached. It's also helpful to learn about Blazor's project templates and tooling before working with the component examples in the *Render modes* article.
 
 :::moniker-end
-
-## Additional resources
-
-:::moniker range=">= aspnetcore-6.0"
-
-* <xref:blazor/hybrid/index>
-* <xref:blazor/tooling>
-* <xref:blazor/project-structure>
-* <xref:signalr/introduction>
-* <xref:blazor/fundamentals/signalr>
-* <xref:blazor/tutorials/signalr-blazor>
-
-:::moniker-end
-
-:::moniker range="< aspnetcore-6.0"
-
-* <xref:blazor/tooling>
-* <xref:blazor/project-structure>
-* <xref:signalr/introduction>
-* <xref:blazor/fundamentals/signalr>
-* <xref:blazor/tutorials/signalr-blazor>
-
-:::moniker-end
@@ -28,30 +28,27 @@ Blazor is a framework for building interactive client-side web UI with [.NET](/d
 
 :::moniker range=">= aspnetcore-6.0"
 
-* Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com).
+* Create rich interactive UIs using [C#](/dotnet/csharp/).
 * Share server-side and client-side app logic written in .NET.
 * Render the UI as HTML and CSS for wide browser support, including mobile browsers.
-* Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index).
 * Build hybrid desktop and mobile apps with .NET and Blazor.
 
 :::moniker-end
 
 :::moniker range="< aspnetcore-6.0"
 
-* Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com).
+* Create rich interactive UIs using [C#](/dotnet/csharp/).
 * Share server-side and client-side app logic written in .NET.
 * Render the UI as HTML and CSS for wide browser support, including mobile browsers.
-* Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index).
 
 :::moniker-end
 
 Using .NET for client-side web development offers the following advantages:
 
-* Write code in C# instead of JavaScript.
+* Write code in C#, which can improve productivity in app development and maintenance.
 * Leverage the existing .NET ecosystem of [.NET libraries](/dotnet/standard/class-libraries).
-* Share app logic across server and client.
 * Benefit from .NET's performance, reliability, and security.
-* Stay productive on Windows, Linux, or macOS with a development environment, such as [Visual Studio](https://visualstudio.microsoft.com/) or [Visual Studio Code](https://code.visualstudio.com/).
+* Stay productive on Windows, Linux, or macOS with a development environment, such as [Visual Studio](https://visualstudio.microsoft.com/) or [Visual Studio Code](https://code.visualstudio.com/). Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index).
 * Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.
 
 > [!NOTE]
@@ -70,108 +67,48 @@ Components are .NET C# classes built into [.NET assemblies](/dotnet/standard/ass
 
 The component class is usually written in the form of a [Razor](xref:mvc/views/razor) markup page with a `.razor` file extension. Components in Blazor are formally referred to as *Razor components*, informally as *Blazor components*. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with [IntelliSense](/visualstudio/ide/using-intellisense) programming support in Visual Studio.
 
-Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component (`Dialog.razor`) that displays a dialog and processes an event when the user selects a button:
+Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component that increments a counter when the user selects a button.
 
 ```razor
-<div class="card" style="width:22rem">
-    <div class="card-body">
-        <h3 class="card-title">@Title</h3>
-        <p class="card-text">@ChildContent</p>
-        <button @onclick="OnYes">Yes!</button>
-    </div>
-</div>
+<PageTitle>Counter</PageTitle>
 
-@code {
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
-    [Parameter]
-    public string? Title { get; set; }
+@code {
+    private int currentCount = 0;
 
-    private void OnYes()
+    private void IncrementCount()
     {
-        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
+        currentCount++;
     }
 }
 ```
 
-In the preceding example, `OnYes` is a C# method triggered by the button's `onclick` event. The dialog's text (`ChildContent`) and title (`Title`) are provided by the following component that uses this component in its UI.
-
-The `Dialog` component is nested within another component using an HTML tag. In the following example, the `Index` component (`Index.razor`) uses the preceding `Dialog` component. The tag's `Title` attribute passes a value for the title to the `Dialog` component's `Title` property.  The `Dialog` component's text (`ChildContent`) are set by the content of the `<Dialog>` element. When the `Dialog` component is added to the `Index` component, [IntelliSense in Visual Studio](/visualstudio/ide/using-intellisense) speeds development with syntax and parameter completion.
-
-:::moniker range=">= aspnetcore-8.0"
-
-```razor
-@page "/"
-@attribute [RenderModeServer]
-
-<h1>Hello, world!</h1>
-
-<p>
-    Welcome to your new app.
-</p>
-
-<Dialog Title="Learn More">
-    Do you want to <i>learn more</i> about Blazor?
-</Dialog>
-```
-
-:::moniker-end
-
-:::moniker range="< aspnetcore-8.0"
-
-```razor
-@page "/"
-
-<h1>Hello, world!</h1>
-
-<p>
-    Welcome to your new app.
-</p>
-
-<Dialog Title="Learn More">
-    Do you want to <i>learn more</i> about Blazor?
-</Dialog>
-```
-
-:::moniker-end
-
-The dialog is rendered when the `Index` component is accessed in a browser. When the button is selected by the user, the browser's developer tools console shows the message written by the `OnYes` method:
-
-![Dialog component rendered in the browser nested inside of the Index component. The browser developer tools console shows the message written by C# code when the user selects the Yes! button in the UI.](~/blazor/index/_static/dialog.png)
-
 Components render into an in-memory representation of the browser's [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) called a *render tree*, which is used to update the UI in a flexible and efficient way.
 
 :::moniker range=">= aspnetcore-8.0"
 
-## Blazor Web Apps
-
-Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single project, where you can switch between server-side and client-side rendering modes and even mix them in the same page. 
-
-When a Blazor Web App uses interactivity with server rendering, the server generates HTML in response to a request and sends it to the browser. The page loads fast because UI rendering is performed quickly on the server without the need to download a large JavaScript bundle or wait for the establishment of a [SignalR](xref:signalr/introduction) connection to the client.
+## Build a full-stack web app with Blazor
 
-*Streaming rendering* can improve the user experience with SSR when long-running asynchronous tasks are required to fully render a page. Initially, Blazor renders the entire page for the browser with placeholder content. The asynchronous operations execute on the server. After the operations are complete, the updated content is sent to the browser on the same response connection and patched into page. The benefit of this approach is that the main layout of the app renders as quickly as possible.
+Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single solution, where you can switch between server-side and client-side rendering modes and even mix them in the same page. 
 
-Blazor Web Apps also support interactivity with client rendering that relies on a .NET runtime running on [WebAssembly](https://webassembly.org). For more information on WebAssembly, see the [Blazor WebAssembly](#blazor-webassembly) section.
+Blazor Web Apps can deliver UI to the browser fast by statically rendering HTML content from the server in response to requests. The page loads fast because UI rendering is performed quickly on the server without the need to download a large JavaScript bundle. Blazor can also further improve the user experience with various progressive enhancements to server rendering, such as enhanced navigation with form posts and streaming rendering of asynchronously-generated content.
 
-After rendering is complete, interactivity on the client can adopt either or both of the following techniques, even in the same page:
+Blazor supports *interactive* server rendering, where UI interactions are handled from the server over a real-time connection with the browser. Interactive server rendering enables a rich user experience like one would expect from a client app but without the need to create API endpoints to access server resources.
 
-* UI updates and JavaScript interop calls handled over a SignalR connection. The runtime stays on the server and handles:
-  * Executing the app's C# code.
-  * UI events from the browser that are sent to the server.
-  * Applying UI updates to a rendered component that are sent back by the server.
-* Rich interactivity and UI updates handled by a .NET runtime running in the browser on WebAssembly.
-  * C# code files and Razor files are compiled into .NET assemblies.
-  * The assemblies and the [.NET runtime](/dotnet/framework/get-started/overview) are downloaded to the browser.
-  * Blazor bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.
+Blazor Web Apps support interactivity with client rendering that relies on a .NET runtime built with [WebAssembly](https://webassembly.org) that you can download with your app. When running Blazor on WebAssembly, your .NET code can access the full functionality of the browser and interop with JavaScript. Your .NET code runs in the browser's security sandbox with the protections that the sandbox provides against malicious actions on the client machine.
 
-<!--
+Blazor apps can entirely target running on WebAssembly in the browser without the involvement of a server. For a *standalone Blazor WebAssembly app*, assets are deployed as static files to a web server or service capable of serving static content to clients. Once downloaded, standalone Blazor WebAssembly apps can be cached and executed offline as a Progressive Web App (PWA).
 
-IMAGE for Blazor Web Apps
+## Build a native client app with Blazor Hybrid
 
-![XXXXXXXXX](~/blazor/index/_static/blazor-web-app.png)
+*Blazor Hybrid* enables using Razor components in a native client app with a blend of native and web technologies for web, mobile, and desktop platforms. Code runs natively in the .NET process and renders web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps are built with [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui), which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.
 
--->
+The Blazor Hybrid supports [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/) and [Windows Forms](/dotnet/desktop/winforms/overview/) to transition apps from earlier technology to .NET MAUI.
 
 :::moniker-end
 
@@ -201,8 +138,6 @@ After the components are interactive on the client, UI updates are triggered by
 
 A component is disposed after the user navigates away from the component.
 
-:::moniker-end
-
 ## Blazor WebAssembly
 
 Blazor WebAssembly is a [single-page app (SPA) framework](/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps) for building interactive client-side web apps with .NET.
@@ -225,7 +160,9 @@ The size of the published app, its *payload size*, is a critical performance fac
 * HTTP responses are compressed.
 * The .NET runtime and assemblies are cached in the browser.
 
-:::moniker range=">= aspnetcore-6.0"
+:::moniker-end
+
+:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0"
 
 ## Blazor Hybrid
 
@@ -235,13 +172,10 @@ Hybrid apps use a blend of native and web technologies. A *Blazor Hybrid* app us
 * [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/): A UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. 
 * [Windows Forms](/dotnet/desktop/winforms/overview/): A UI framework that creates rich desktop client apps for Windows. The Windows Forms development platform supports a broad set of app development features, including controls, graphics, data binding, and user input.
 
-For more information on creating Blazor Hybrid apps with the preceding frameworks, see the following articles:
-
-* <xref:blazor/hosting-models>
-* <xref:blazor/hybrid/index>
-
 :::moniker-end
 
+:::moniker range="< aspnetcore-8.0"
+
 ## JavaScript interop
 
 For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can [call into JavaScript code](xref:blazor/js-interop/call-javascript-from-dotnet), and JavaScript code can [call into C# code](xref:blazor/js-interop/call-dotnet-from-javascript).
@@ -252,16 +186,10 @@ Blazor implements the [.NET Standard](/dotnet/standard/net-standard), which enab
 
 APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a <xref:System.PlatformNotSupportedException>.
 
-## Additional resources
-
-* [WebAssembly](https://webassembly.org)
-* <xref:blazor/hosting-models>
-* <xref:blazor/tutorials/signalr-blazor>
-* <xref:blazor/js-interop/call-javascript-from-dotnet>
-* <xref:blazor/js-interop/call-dotnet-from-javascript>
-* [mono/mono GitHub repository](https://github.com/mono/mono)
-* [C# Guide](/dotnet/csharp/)
-* <xref:mvc/views/razor>
-* [HTML](https://www.w3.org/html/)
-* [Awesome Blazor](https://github.com/AdrienTorris/awesome-blazor) (Links to community-maintained Blazor resources)
-* [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples)
+:::moniker-end
+
+## Next steps
+
+> [!div class="nextstepaction"]
+> [Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro)
+> <xref:blazor/supported-platforms>
diff --git a/aspnetcore/release-notes/aspnetcore-3.0.md b/aspnetcore/release-notes/aspnetcore-3.0.md
@@ -15,7 +15,7 @@ This article highlights the most significant changes in ASP.NET Core 3.0 with li
 
 Blazor is a new framework in ASP.NET Core for building interactive client-side web UI with .NET:
 
-* Create rich interactive UIs using C# instead of JavaScript.
+* Create rich interactive UIs using C#.
 * Share server-side and client-side app logic written in .NET.
 * Render the UI as HTML and CSS for wide browser support, including mobile browsers.
 

diff --git a/aspnetcore/tutorials/choose-web-ui.md b/aspnetcore/tutorials/choose-web-ui.md
@@ -113,7 +113,7 @@ Blazor is a framework for building interactive client-side web UI with [.NET](/d
 
 Using .NET for client-side web development offers the following advantages:
 
-* Write code in C# instead of JavaScript.
+* Write code in C#, which can improve productivity in app development and maintenance.
 * Leverage the existing .NET ecosystem of [.NET libraries](/dotnet/standard/class-libraries).
 * Share app logic across server and client.
 * Benefit from .NET's performance, reliability, and security.