From 3a38c51b066fb6f6263cd12f542dd006eae9158d Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 10 Jan 2024 06:45:50 -0500 Subject: [PATCH 1/3] Apply a render mode programatically section --- aspnetcore/blazor/components/render-modes.md | 31 ++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/aspnetcore/blazor/components/render-modes.md b/aspnetcore/blazor/components/render-modes.md index 969657480544..d1f0eb3a3299 100644 --- a/aspnetcore/blazor/components/render-modes.md +++ b/aspnetcore/blazor/components/render-modes.md @@ -178,6 +178,37 @@ To enable global interactivity when creating a Blazor Web App: For more information, see . +## Apply a render mode programatically + +A component definition can define a render mode via a private field: + +```razor +@rendermode componentRenderMode + +... + +@code { + private static IComponentRenderMode componentRenderMode = + new InteractiveServerRenderMode(); +} +``` + + is available in statically-rendered root components, such as the `App` component (`App.razor`). You can use [`HttpContext.Request.Path`](xref:Microsoft.AspNetCore.Http.HttpContext.Request%2A) to specify a render mode for a group of pages. + +The following example applies interactive server-side rendering (interactive SSR) to any request for a component in the app's `Admin` folder (`Components/Admin`), including subfolders. Components at any other path don't receive a render mode (`null`) from the `Routes` component, and they either render statically, inherit a render mode from a parent component, or set their own render mode. + +```razor + + +... + +[CascadingParameter] +private HttpContext HttpContext { get; set; } = default!; + +private IComponentRenderMode? RenderModeForPage => + HttpContext.Request.Path.StartsWithSegments("/Admin") ? InteractiveServer : null; +``` + ## Prerendering *Prerendering* is the process of initially rendering page content on the server without enabling event handlers for rendered controls. The server outputs the HTML UI of the page as soon as possible in response to the initial request, which makes the app feel more responsive to users. Prerendering can also improve [Search Engine Optimization (SEO)](https://developer.mozilla.org/docs/Glossary/SEO) by rendering content for the initial HTTP response that search engines use to calculate page rank. From 809007a9a366066a4f59efe4f0ee1f7b37ada01b Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 10 Jan 2024 06:52:57 -0500 Subject: [PATCH 2/3] Updates --- aspnetcore/blazor/components/render-modes.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/aspnetcore/blazor/components/render-modes.md b/aspnetcore/blazor/components/render-modes.md index d1f0eb3a3299..5744c74c03b8 100644 --- a/aspnetcore/blazor/components/render-modes.md +++ b/aspnetcore/blazor/components/render-modes.md @@ -180,6 +180,10 @@ For more information, see . ## Apply a render mode programatically +Properties and fields can assign a render mode to a component or a group of components via inheritance. + +### By component definition + A component definition can define a render mode via a private field: ```razor @@ -193,6 +197,8 @@ A component definition can define a render mode via a private field: } ``` +### By component instance + is available in statically-rendered root components, such as the `App` component (`App.razor`). You can use [`HttpContext.Request.Path`](xref:Microsoft.AspNetCore.Http.HttpContext.Request%2A) to specify a render mode for a group of pages. The following example applies interactive server-side rendering (interactive SSR) to any request for a component in the app's `Admin` folder (`Components/Admin`), including subfolders. Components at any other path don't receive a render mode (`null`) from the `Routes` component, and they either render statically, inherit a render mode from a parent component, or set their own render mode. @@ -209,6 +215,8 @@ private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Admin") ? InteractiveServer : null; ``` +Additional information on render mode propagation and inheritance is provided later in this article. + ## Prerendering *Prerendering* is the process of initially rendering page content on the server without enabling event handlers for rendered controls. The server outputs the HTML UI of the page as soon as possible in response to the initial request, which makes the app feel more responsive to users. Prerendering can also improve [Search Engine Optimization (SEO)](https://developer.mozilla.org/docs/Glossary/SEO) by rendering content for the initial HTTP response that search engines use to calculate page rank. From 358cfd37a995c9f4d59b9ff55ddae63034f50dc5 Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Wed, 10 Jan 2024 06:55:12 -0500 Subject: [PATCH 3/3] Updates --- aspnetcore/blazor/components/render-modes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/components/render-modes.md b/aspnetcore/blazor/components/render-modes.md index 5744c74c03b8..d5eafe866b4b 100644 --- a/aspnetcore/blazor/components/render-modes.md +++ b/aspnetcore/blazor/components/render-modes.md @@ -215,7 +215,7 @@ private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Admin") ? InteractiveServer : null; ``` -Additional information on render mode propagation and inheritance is provided later in this article. +Additional information on render mode propagation is provided in the [Render mode propagation](#render-mode-propagation) section later in this article. ## Prerendering