Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions aspnetcore/blazor/components/render-modes.md
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,45 @@ To enable global interactivity when creating a Blazor Web App:

For more information, see <xref:blazor/tooling>.

## 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
@rendermode componentRenderMode

...

@code {
private static IComponentRenderMode componentRenderMode =
new InteractiveServerRenderMode();
}
```

### By component instance

<xref:Microsoft.AspNetCore.Http.HttpContext> 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
<Routes @rendermode="@RenderModeForPage" />

...

[CascadingParameter]
private HttpContext HttpContext { get; set; } = default!;

private IComponentRenderMode? RenderModeForPage =>
HttpContext.Request.Path.StartsWithSegments("/Admin") ? InteractiveServer : null;
```

Additional information on render mode propagation is provided in the [Render mode propagation](#render-mode-propagation) section 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.
Expand Down