> For the complete documentation index, see [llms.txt](https://onenesss-organization.gitbook.io/jj-xiaoce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onenesss-organization.gitbook.io/jj-xiaoce/next.js-kai-fa-zhi-nan/23.-zu-jian-pian-link-he-script.md).
# 23. 组件篇 ❘ Link 和 Script
### 前言
Next.js 内置了 `` 和 `
```
注意必须为内联脚本分配一个 id，以保证 Next.js 追踪和优化脚本。
或者使用 `dangerouslySetInnerHTML`属性：
```javascript
```
#### 4. strategy
脚本加载策略，一共有四种：
1. **beforeInteractive**： 在可交互前加载，适用于如机器人检测、Cookie 管理等
2. **afterInteractive**：默认值，在可交互后加载，适用于如数据统计等
3. **lazyOnload**：在浏览器空闲时间加载
4. **worker**：（实验性质）通过 web worker 加载
`beforeInteractive`，顾名思义，在可交互之前加载。`beforeInteractive`脚本必须放在根布局（`app/layout.tsx`）之中，用于加载整站都需要的脚本，适用于一些在页面具有可交互前需要获取的关键脚本。它会被注入到 HTML 文档的 `head` 中，不管你写在组件的哪里：
```javascript
// app/layout.js
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
虽然我们将 Script 组件写在 body 标签之后，但依然被注入到 head 中：
`afterInteractive`，顾名思义，在页面可交互后（不一定是完全可交互）后加载，这是 Script 组件默认的加载策略，适用于需要尽快加载的脚本。`afterInteractive`脚本可以写在任何页面或者布局中，并且只有当浏览器中打开该页面的时候才会加载和执行。
```javascript
// app/page.js
import Script from 'next/script'
export default function Page() {
return (
<>
)
}
```
`lazyOnload`，在浏览器空闲的时候注入到 HTML 客户端，并在页面所有资源都获取后开始加载。此策略是用于不需要提前加载的后台或者低优先级脚本。lazyOnload 脚本可以写在任何页面或者布局中，并且只有当浏览器中打开该页面的时候才会加载和执行。
```javascript
// app/page.js
import Script from 'next/script'
export default function Page() {
return (
<>
)
}
```
`worker`，实验性质的加载策略，目前并不稳定，并且不能在 `app` 目录下使用，所以请谨慎使用。使用该策略的脚本将开一个 web worker 线程执行，从确保主线程处理关键的代码。它的背后是使用 [Partytown](https://partytown.builder.io/) 处理。尽管这个策略可以用于任何脚本，但作为一种高级用法，并不保证支持所有第三方脚本。
使用 worker 策略，需要通过 `next.config.js` 的 `nextScriptWorkers` 配置项开启：
```javascript
// next.config.js
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}
```
此时当你运行 `npm run dev`的时候，Next.js 会提示你安装 Partytown：
```javascript
npm install @builder.io/partytown
```
当完成设置后，定义 `strategy="worker"`将会在应用中实例化 Partytown，并将脚本放在 web worker 中。不过 `worker` 脚本目前只能在 `pages/` 目录下使用：
```javascript
// pages/home.js
import Script from 'next/script'
export default function Home() {
return (
<>
)
}
```
#### 5. onLoad
一些三方脚本需要在脚本加载完毕后执行 JavaScript 代码以完成实例化或者调用函数。如果使用 `afterInteractive` 或者 `lazyOnload` 作为加载策略，则可以在加载完后使用 `onLoad` 属性执行代码：
```javascript
'use client'
// app/page.js
import Script from 'next/script'
export default function Page() {
return (
<>