Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update note in script doc #26214

Merged
merged 2 commits into from
Jun 16, 2021
+20 −12
Merged

Update note in script doc #26214

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3770bb4
Update note in script doc
timneutkens Jun 16, 2021
7a24807
Remove table
timneutkens Jun 16, 2021
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
32 changes: 20 additions & 12 deletions docs/basic-features/script.md
View file
Open in desktop
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