Skip to content

Commit

Permalink
Update script tag location guidance (#34346)
Browse files Browse the repository at this point in the history
  • Loading branch information
guardrex authored Dec 12, 2024
1 parent f538c9a commit 9214ff5
Showing 1 changed file with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@ Load JavaScript (JS) code using any of the following approaches:

:::moniker-end

## Location of `<script>` tags

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

> [!WARNING]
> Only place a `<script>` tag in a component file (`.razor`) if the component is guaranteed to adopt [static server-side rendering (static SSR)](xref:blazor/fundamentals/index#client-and-server-rendering-concepts) because the `<script>` tag can't be updated dynamically.
Only place a `<script>` tag in a component file (`.razor`) if the component is guaranteed to adopt [static server-side rendering (static SSR)](xref:blazor/fundamentals/index#client-and-server-rendering-concepts) because the `<script>` tag can't be updated dynamically. Placing a `<script>` tag in a component file doesn't produce a compile-time warning or error, but script loading behavior might not match your expectations in components that don't adopt static SSR when the component is rendered.

This comment has been minimized.

Copy link
@hakenr

hakenr Dec 13, 2024

Member

@guardrex
Actually, it’s not the difference between interactive and static rendering that makes the difference.
It’s due to the page lifecycle and the nature of navigation in such scenarios.

Even with static SSR, when enhanced navigation is enabled, the behavior of dynamically added, removed, or modified scripts gets tricky:

  • The onLoad event doesn’t work as expected.
  • Blazor events like webStart and enhanceNavigation need to be used instead.

I think it’s only safe to use the <script> tag in the statically rendered root component (App.razor), where the script tag itself isn’t expected to change, appear, or disappear. 😇

This comment has been minimized.

Copy link
@guardrex

guardrex Dec 14, 2024

Author Collaborator

Opened #34371 to work on it. This is what was provided. Let's see if Javier can help in January. Everyone is totally bugging out now ... or is doing high priority work ... or isn't working Blazor any longer. We'll have to wait until January to work on it.


:::moniker-end

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

> [!WARNING]
> Don't place a `<script>` tag in a component file (`.razor`) because the `<script>` tag can't be updated dynamically.
Don't place a `<script>` tag in a component file (`.razor`) because the `<script>` tag can't be updated dynamically. Placing a `<script>` tag in a component file produces a compile-time error.

:::moniker-end

Expand All @@ -61,7 +61,7 @@ Load JavaScript (JS) code using any of the following approaches:
:::moniker-end

### Load a script in `<head>` markup
## Load a script in `<head>` markup

*The approach in this section isn't generally recommended.*

Expand All @@ -84,7 +84,7 @@ Loading JS from the `<head>` isn't the best approach for the following reasons:
* JS interop may fail if the script depends on Blazor. We recommend loading scripts using one of the other approaches, not via the `<head>` markup.
* The page may become interactive slower due to the time it takes to parse the JS in the script.

### Load a script in `<body>` markup
## Load a script in `<body>` markup

Place the JavaScript tags (`<script>...</script>`) inside the [closing `</body>` element](xref:blazor/project-structure#location-of-head-and-body-content) after the Blazor script reference:

Expand All @@ -105,7 +105,7 @@ Place the JavaScript tags (`<script>...</script>`) inside the [closing `</body>`

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

### Load a script from an external JavaScript file (`.js`) collocated with a component
## Load a script from an external JavaScript file (`.js`) collocated with a component

[!INCLUDE[](~/blazor/includes/js-interop/js-collocation.md)]

Expand Down Expand Up @@ -170,15 +170,15 @@ For more information, see <xref:blazor/components/class-libraries>.

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

### Inject a script before or after Blazor starts
## Inject a script before or after Blazor starts

To ensure scripts load before or after Blazor starts, use a JavaScript initializer. For more information and examples, see <xref:blazor/fundamentals/startup#javascript-initializers>.

:::moniker-end

:::moniker range="< aspnetcore-6.0"

### Inject a script after Blazor starts
## Inject a script after Blazor starts

To inject a script after Blazor starts, chain to the `Promise` that results from a manual start of Blazor. For more information and an example, see <xref:blazor/fundamentals/startup#inject-a-script-after-blazor-starts>.

Expand Down

0 comments on commit 9214ff5

Please sign in to comment.