Enhance layout+content for component integration (#17793)

Author: guardrex

aspnetcore/blazor/integrate-components.md

@@ -5,7 +5,7 @@ description: Learn about data binding scenarios for components and DOM elements
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 04/01/2020
+ms.date: 04/14/2020
 no-loc: [Blazor, SignalR]
 uid: blazor/integrate-components
 ---
@@ -15,7 +15,14 @@ By [Luke Latham](https://github.com/guardrex) and [Daniel Roth](https://github.c
 
 Razor components can be integrated into Razor Pages and MVC apps. When the page or view is rendered, components can be prerendered at the same time.
 
-## Prepare the app to use components in pages and views
+After [preparing the app](#prepare-the-app), use the guidance in the following sections depending on the app's requirements:
+
+* Routable components – For components that are directly routable from user requests. Follow this guidance when visitors should be able to make an HTTP request in their browser for a component with an [`@page`](xref:mvc/views/razor#page) directive.
+  * [Use routable components in a Razor Pages app](#use-routable-components-in-a-razor-pages-app)
+  * [Use routable components in an MVC app](#use-routable-components-in-an-mvc-app)
+* [Render components from a page or view](#render-components-from-a-page-or-view) – For components that aren't directly routable from user requests. Follow this guidance when the app embeds components into existing pages and views with the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper).
+
+## Prepare the app
 
 An existing Razor Pages or MVC app can integrate Razor components into pages and views:
 
@@ -72,7 +79,7 @@ An existing Razor Pages or MVC app can integrate Razor components into pages and
 
 To support routable Razor components in Razor Pages apps:
 
-1. Follow the guidance in the [Prepare the app to use components in pages and views](#prepare-the-app-to-use-components-in-pages-and-views) section.
+1. Follow the guidance in the [Prepare the app](#prepare-the-app) section.
 
 1. Add an *App.razor* file to the project root with the following content:
 
@@ -139,15 +146,15 @@ To support routable Razor components in Razor Pages apps:
    ...
    ```
 
-   For more information on namespaces, see the [Component namespaces](#component-namespaces) section.
+For more information on namespaces, see the [Component namespaces](#component-namespaces) section.
 
 ## Use routable components in an MVC app
 
 *This section pertains to adding components that are directly routable from user requests.*
 
 To support routable Razor components in MVC apps:
 
-1. Follow the guidance in the [Prepare the app to use components in pages and views](#prepare-the-app-to-use-components-in-pages-and-views) section.
+1. Follow the guidance in the [Prepare the app](#prepare-the-app) section.
 
 1. Add an *App.razor* file to the root of the project with the following content:
 
@@ -178,6 +185,19 @@ To support routable Razor components in MVC apps:
    ```
 
    Components use the shared *_Layout.cshtml* file for their layout.
+   
+   <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode> configures whether the `App` component:
+
+   * Is prerendered into the page.
+   * Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
+
+   | Render Mode | Description |
+   | ----------- | ----------- |
+   | <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.ServerPrerendered> | Renders the `App` component into static HTML and includes a marker for a Blazor Server app. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
+   | <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Server> | Renders a marker for a Blazor Server app. Output from the `App` component isn't included. When the user-agent starts, this marker is used to bootstrap a Blazor app. |
+   | <xref:Microsoft.AspNetCore.Mvc.Rendering.RenderMode.Static> | Renders the `App` component into static HTML. |
+
+   For more information on the Component Tag Helper, see <xref:mvc/views/tag-helpers/builtin-th/component-tag-helper>.
 
 1. Add an action to the Home controller:
 
@@ -209,7 +229,19 @@ To support routable Razor components in MVC apps:
    ...
    ```
 
-   For more information on namespaces, see the [Component namespaces](#component-namespaces) section.
+For more information on namespaces, see the [Component namespaces](#component-namespaces) section.
+
+## Render components from a page or view
+
+*This section pertains to adding components to pages or views, where the components aren't directly routable from user requests.*
+
+To render a component from a page or view, use the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper).
+
+For more information on how components are rendered, component state, and the `Component` Tag Helper, see the following articles:
+
+* <xref:blazor/hosting-models>
+* <xref:blazor/hosting-model-configuration>
+* <xref:mvc/views/tag-helpers/builtin-th/component-tag-helper>
 
 ## Component namespaces
 
@@ -225,15 +257,3 @@ When using a custom folder to hold the app's components, add the namespace repre
 The *_ViewImports.cshtml* file is located in the *Pages* folder of a Razor Pages app or the *Views* folder of an MVC app.
 
 For more information, see <xref:blazor/components#import-components>.
-
-## Render components from a page or view
-
-*This section pertains to adding components to pages or views, where the components aren't directly routable from user requests.*
-
-To render a component from a page or view, use the [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper).
-
-For more information on how components are rendered, component state, and the `Component` Tag Helper, see the following articles:
-
-* <xref:blazor/hosting-models>
-* <xref:blazor/hosting-model-configuration>
-* <xref:mvc/views/tag-helpers/builtin-th/component-tag-helper>