Skip to content

Commit

Permalink
Update note in script doc (#26214)
Browse files Browse the repository at this point in the history
  • Loading branch information
timneutkens authored Jun 16, 2021
1 parent 2967fe1 commit 947ee9d
Showing 1 changed file with 20 additions and 12 deletions.
32 changes: 20 additions & 12 deletions docs/basic-features/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@ import Script from 'next/script'

Three loading strategies will be initially supported for wrapping third-party scripts:

- beforeInteractive
- `beforeInteractive`
- script is fetched and executed _before_ page is interactive (i.e. before self-bundled javascript is executed)
- script is injected in SSR’s HTML - similar to self-bundled JS
- afterInteractive (**default**)
- `afterInteractive` (**default**)
- script is fetched and executed _after_ page is interactive (i.e. after self-bundled javascript is executed)
- script is injected during hydration and will execute soon after hydration
- lazyOnload
- script is injected at onload, and will execute in a subsequent idle period (using `requestIdleCallback`)
- `lazyOnload`
- script is injected at `onload`, and will execute in a subsequent idle period (using `requestIdleCallback`)

NOTE: above strategies work the same for inline scripts wrapped with ScriptLoader.
> Note: above strategies work the same for inline scripts wrapped with `<Script>`.
## Example scenarios

Expand Down Expand Up @@ -82,10 +82,18 @@ import Script from 'next/script'

## Which third-party scripts to wrap with Script Loader

We recommend the following Script Loader strategies for these categories of third-party scripts

| Loading strategy | third-party categories |
| ----------------- | -------------------------------------------------------------------------------------------- |
| beforeInteractive | polyfill.io<br>Bot detection, security & authentication<br>User consent management (GDPR) |
| afterInteractive | Tag-managers<br>Analytics |
| lazyOnload | Customer relationship management eg. Google feedback, chat support widget<br>Social networks |
We recommend the following Script Loader strategies for these categories of third-party scripts:

- `beforeInteractive`
- [polyfill.io](https://polyfill.io)
- Bot detection
- Security and Authentication
- User consent management (GDPR)
- `afterInteractive`
- Tag-managers
- Analytics
- `lazyOnload`
- Customer relationship management
- Google feedback
- Chat support widget
- Social networks

0 comments on commit 947ee9d

Please sign in to comment.