Skip to content
Merged
Show file tree
Hide file tree
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
6 changes: 3 additions & 3 deletions aspnetcore/blazor/call-web-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ This article describes how to call a web API from a Blazor app.
:::zone pivot="webassembly"

> [!NOTE]
> This article has loaded **WebAssembly** render mode coverage for calling web APIs. The [Server render mode coverage](?pivots=server) addresses the following subjects:
> This article has loaded **WebAssembly** client-side rendering (CSR) coverage for calling web APIs. The [coverage for **Server** interactive server-side rendering (interactive SSR)](?pivots=server) addresses the following subjects:
>
> * Use of the `HttpClient` factory infrastructure to provide an `HttpClient` to the app.
> * Cross-Origin Resource Sharing (CORS) pertaining to server-side components.
Expand Down Expand Up @@ -61,7 +61,7 @@ The Blazor examples that demonstrate obtaining weather data from a server API ar

:::moniker range=">= aspnetcore-8.0"

For server-side components in Blazor Web Apps that require interactivity, add Interactive Server rendering to the component:
For server-side components in Blazor Web Apps that require interactivity, add interactive server-side rendering (interactive SSR) to the component:

```razor
@rendermode InteractiveServer
Expand Down Expand Up @@ -750,7 +750,7 @@ For more information, see <xref:blazor/fundamentals/handle-errors>.
:::zone pivot="server"

> [!NOTE]
> This article has loaded **Server** render mode coverage for calling web APIs. The [WebAssembly render mode coverage](?pivots=webassembly) addresses the following subjects:
> This article has loaded **Server** interactive server-side rendering (interactive SSR) coverage for calling web APIs. The [**WebAssembly** client-side rendering (CSR) coverage](?pivots=webassembly) addresses the following subjects:
>
> * Client-side examples that call a web API to create, read, update, and delete todo list items.
> * `System.Net.Http.Json` package.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ Wrap the markup of the `Routes` component in a [`CascadingValue`](xref:Microsoft
}
```

In the `App` component (`Components/App.razor`), adopt an interactive render mode for the entire app. The following example adopts Interactive Server rendering:
In the `App` component (`Components/App.razor`), adopt an interactive render mode for the entire app. The following example adopts interactive server-side rendering (interactive SSR):

```razor
<Routes @rendermode="InteractiveServer" />
Expand Down Expand Up @@ -317,10 +317,10 @@ Similar to a regular component parameter, components accepting a cascading param

Cascading parameters don't pass data across render mode boundaries:

* Interactive sessions run in a different context than the Static Server-rendered pages. There's no requirement that the server producing the page is even the same machine that hosts some later Interactive Server session, including for WebAssembly components where the server is a different machine to the client. The benefit of Static Server rendering is to gain the full performance of pure stateless HTML rendering.
* Interactive sessions run in a different context than the pages that use static server-side rendering (static SSR). There's no requirement that the server producing the page is even the same machine that hosts some later Interactive Server session, including for WebAssembly components where the server is a different machine to the client. The benefit of static server-side rendering (static SSR) is to gain the full performance of pure stateless HTML rendering.

* State crossing the boundary between static and interactive rendering must be serializable. Components are arbitrary objects that reference a vast chain of other objects, including the renderer, the DI container, and every DI service instance. You must explicitly cause state to be serialized from Static Server rendering to make it available in subsequent interactively-rendered components. Two approaches are adopted:
* Via the Blazor framework, parameters passed across a Static Server rendering to interactive boundary are serialized automatically if they're JSON-serializable, or an error is thrown.
* State crossing the boundary between static and interactive rendering must be serializable. Components are arbitrary objects that reference a vast chain of other objects, including the renderer, the DI container, and every DI service instance. You must explicitly cause state to be serialized from static SSR to make it available in subsequent interactively-rendered components. Two approaches are adopted:
* Via the Blazor framework, parameters passed across a static SSR to interactive rendering boundary are serialized automatically if they're JSON-serializable, or an error is thrown.
* State stored in [`PersistentComponentState`](xref:blazor/components/prerendering-and-integration#persist-prerendered-state) is serialized and recovered automatically if it's JSON-serializable, or an error is thrown.

Cascading parameters aren't JSON-serialize because the typical usage patterns for cascading parameters are somewhat like DI services. There are often platform-specific variants of cascading parameters, so it would be unhelpful to developers if the framework stopped developers from having server-interactive-specific versions or WebAssembly-specific versions. Also, many cascading parameter values in general aren't serializable, so it would be impractical to update existing apps if you had to stop using all nonserializable cascading parameter values.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ This article provides guidance for component library authors considering support

Blazor encourages the development of an ecosystem of open-source and commercial component libraries, formally called *Razor class libraries (RCLs)*. Developers might also create reusable components for sharing components privately across apps within their own companies. Ideally, components are developed for compatibility with as many hosting models and rendering modes as possible. Static SSR introduces additional restrictions that can be more challenging to support than interactive rendering modes.

## Understand the capabilities and restrictions of Static SSR
## Understand the capabilities and restrictions of static SSR

Static SSR is a mode in which components run when the server handles an incoming HTTP request. Blazor renders the component as HTML, which is included in the response. Once the response is sent, the server-side component and renderer state is discarded, so all that remains is HTML in the browser.

Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/blazor/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -907,7 +907,7 @@ Quote &copy;2005 [Universal Pictures](https://www.uphe.com): [Serenity](https://

## Route parameters

Components can specify route parameters in the route template of the [`@page`][9] directive. The [Blazor Router](xref:blazor/fundamentals/routing) uses route parameters to populate corresponding component parameters.
Components can specify route parameters in the route template of the [`@page`][9] directive. The [Blazor router](xref:blazor/fundamentals/routing) uses route parameters to populate corresponding component parameters.

:::moniker range=">= aspnetcore-5.0"

Expand Down
57 changes: 27 additions & 30 deletions aspnetcore/blazor/components/integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ Use the guidance in the following sections depending on the project's requiremen

This section covers adding Blazor support to an ASP.NET Core app:

* [Add Static Server Razor component rendering](#add-static-server-razor-component-rendering)
* [Enable Interactive Server rendering](#enable-interactive-server-rendering)
* [Enable interactive Auto or WebAssembly rendering](#enable-interactive-auto-and-webassembly-rendering)
* [Add static server-side rendering (static SSR)](#add-static-server-side-rendering-static-ssr)
* [Enable interactive server-side rendering (interactive SSR)](#enable-interactive-server-side-rendering-interactive-ssr)
* [Enable interactive automatic (Auto) or client-side rendering (CSR)](#enable-interactive-automatic-auto-or-client-side-rendering-csr)

> [!NOTE]
> For the examples in this section, the example app's name and namespace is `BlazorSample`.

### Add Static Server Razor component rendering
### Add static server-side rendering (static SSR)

Add a `Components` folder to the app.

Expand All @@ -60,7 +60,7 @@ Add the following `_Imports` file for namespaces used by Razor components.

Change the namespace `BlazorSample` in the preceding example to match the app.

Add the Blazor Router (`<Router>`, <xref:Microsoft.AspNetCore.Components.Routing.Router>) to the app in a `Routes` component, which is placed in the app's `Components` folder.
Add the Blazor router (`<Router>`, <xref:Microsoft.AspNetCore.Components.Routing.Router>) to the app in a `Routes` component, which is placed in the app's `Components` folder.

`Components/Routes.razor`:

Expand Down Expand Up @@ -113,7 +113,7 @@ For the `<link>` element in the preceding example, change `BlazorSample` in the

Add a `Pages` folder to the `Components` folder to hold routable Razor components.

Add the following `Welcome` component to demonstrate Static Server rendering.
Add the following `Welcome` component to demonstrate static SSR.

`Components/Pages/Welcome.razor`:

Expand Down Expand Up @@ -162,27 +162,25 @@ In the ASP.NET Core project's `Program` file:

When the app is run, the `Welcome` component is accessed at the `/welcome` endpoint.

### Enable Interactive Server rendering
### Enable interactive server-side rendering (interactive SSR)

Follow the guidance in the [Add Static Server Razor component rendering](#add-static-server-razor-component-rendering) section.
Follow the guidance in the [Add static server-side rendering (static SSR)](#add-static-server-side-rendering-static-ssr) section.

Make the following changes in the app's `Program` file:
In the app's `Program` file, add a call to <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddInteractiveServerComponents%2A> where Razor component services are added with <xref:Microsoft.Extensions.DependencyInjection.RazorComponentsServiceCollectionExtensions.AddRazorComponents%2A>:

* Add a call to <xref:Microsoft.Extensions.DependencyInjection.ServerRazorComponentsBuilderExtensions.AddInteractiveServerComponents%2A> where Razor component services are added with <xref:Microsoft.Extensions.DependencyInjection.RazorComponentsServiceCollectionExtensions.AddRazorComponents%2A>:

```csharp
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
```
```csharp
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
```

* Add a call to <xref:Microsoft.AspNetCore.Builder.ServerRazorComponentsEndpointConventionBuilderExtensions.AddInteractiveServerRenderMode%2A> where Razor components are mapped with <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A>:
Also in the `Program` file, add a call to <xref:Microsoft.AspNetCore.Builder.ServerRazorComponentsEndpointConventionBuilderExtensions.AddInteractiveServerRenderMode%2A> where Razor components are mapped with <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A>:

```csharp
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
```
```csharp
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
```

Add the following `Counter` component to the app that adopts the Interactive Server render mode.
Add the following `Counter` component to the app that adopts interactive server-side rendering (interactive SSR).

`Components/Pages/Counter.razor`:

Expand Down Expand Up @@ -210,16 +208,16 @@ Add the following `Counter` component to the app that adopts the Interactive Ser

When the app is run, the `Counter` component is accessed at `/counter`.

### Enable interactive Auto and WebAssembly rendering
### Enable interactive automatic (Auto) or client-side rendering (CSR)

Follow the guidance in the [Add Static Server Razor component rendering](#add-static-server-razor-component-rendering) section.
Follow the guidance in the [Add static server-side rendering (static SSR)](#add-static-server-side-rendering-static-ssr) section.

Components using the Auto render mode initially use Interactive Server rendering, but then switch to render on the client after the Blazor bundle has been downloaded and the Blazor runtime activates. Components using the WebAssembly render mode only render interactively on the client after the Blazor bundle is downloaded and the Blazor runtime activates. Keep in mind that when using the Auto or WebAssembly render modes, component code downloaded to the client is ***not*** private. For more information, see <xref:blazor/components/render-modes>.
Components using the Interactive Auto render mode initially use interactive SSR, but then switch to render on the client after the Blazor bundle has been downloaded and the Blazor runtime activates. Components using the Interactive WebAssembly render mode only render interactively on the client after the Blazor bundle is downloaded and the Blazor runtime activates. Keep in mind that when using the Interactive Auto or Interactive WebAssembly render modes, component code downloaded to the client is ***not*** private. For more information, see <xref:blazor/components/render-modes>.

After deciding which render mode to adopt:

* If you plan to adopt the Auto render mode, follow the guidance in the [Enable Interactive Server rendering](#enable-interactive-server-rendering) section.
* If you plan to only adopt Interactive WebAssembly rendering, continue without adding Interactive Server rendering.
* If you plan to adopt the Interactive Auto render mode, follow the guidance in the [Enable interactive server-side rendering (interactive SSR)](#enable-interactive-server-side-rendering-interactive-ssr) section.
* If you plan to only adopt Interactive WebAssembly rendering, continue without adding interactive SSR.

Add a package reference for the [`Microsoft.AspNetCore.Components.WebAssembly.Server`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Server) NuGet package to the app.

Expand Down Expand Up @@ -300,7 +298,7 @@ Make the following changes to the ASP.NET Core app's `Program` file:

* Add the Interactive WebAssembly render mode (<xref:Microsoft.AspNetCore.Builder.WebAssemblyRazorComponentsEndpointConventionBuilderExtensions.AddInteractiveWebAssemblyRenderMode%2A>) and additional assemblies for the `.Client` project where Razor components are mapped with <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A>.

For interactive Auto rendering:
For interactive automatic (Auto) rendering:

```csharp
app.MapRazorComponents<App>()
Expand Down Expand Up @@ -430,7 +428,7 @@ builder.Services.AddRazorComponents()

For more information on adding support for Interactive Server and WebAssembly components, see <xref:blazor/components/render-modes>.

In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component (the first component loaded). By default, the app's root component is the `App` component (`App.razor`). Chain a call to `AddInteractiveInteractiveServerRenderMode` to configure the Server render mode for the app:
In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component (the first component loaded). By default, the app's root component is the `App` component (`App.razor`). Chain a call to `AddInteractiveInteractiveServerRenderMode` to configure interactive server-side rendering (interactive SSR) for the app:

```csharp
app.MapRazorComponents<App>()
Expand Down Expand Up @@ -755,7 +753,7 @@ builder.Services.AddRazorComponents()

For more information on adding support for Interactive Server and WebAssembly components, see <xref:blazor/components/render-modes>.

In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component. By default, the app's root component is the `App` component (`App.razor`). Chain a call to <xref:Microsoft.AspNetCore.Builder.ServerRazorComponentsEndpointConventionBuilderExtensions.AddInteractiveServerRenderMode%2A> to configure the Server render mode for the app:
In the `Program` file immediately after the call to map Razor Pages (<xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapRazorPages%2A>), call <xref:Microsoft.AspNetCore.Builder.RazorComponentsEndpointRouteBuilderExtensions.MapRazorComponents%2A> to discover available components and specify the app's root component. By default, the app's root component is the `App` component (`App.razor`). Chain a call to <xref:Microsoft.AspNetCore.Builder.ServerRazorComponentsEndpointConventionBuilderExtensions.AddInteractiveServerRenderMode%2A> to configure interactive server-side rendering (interactive SSR) for the app:

```csharp
app.MapRazorComponents<App>()
Expand Down Expand Up @@ -851,4 +849,3 @@ For more information, see <xref:blazor/components/index#class-name-and-namespace
## Additional resources

<xref:blazor/components/prerender>

2 changes: 1 addition & 1 deletion aspnetcore/blazor/components/quickgrid.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ For example, add the following component to render a grid.
}
```

The preceding example specifies server rendering (`@rendermode InteractiveServer`), which enables the `QuickGrid`'s interactive features. In this case, the only interactive feature is sortable columns.
The preceding example specifies interactive server-side rendering (interactive SSR) with `@rendermode InteractiveServer`, which enables the `QuickGrid`'s interactive features. In this case, the only interactive feature is sortable columns.

For an example that uses an <xref:System.Linq.IQueryable> with Entity Framework Core as the queryable data source, see the [`SampleQuickGridComponent` component in the ASP.NET Core Basic Test App (`dotnet/aspnetcore` GitHub repository)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor).

Expand Down
Loading