揭秘 NextJS Script 组件

揭秘 NextJS Script 组件

Next.js 的 Script 组件是对原生 <script> 标签的增强封装，主要区别和优势如下：

1. 自动优化加载策略（支持按需/延迟加载）
2. 避免重复加载
3. 内置性能优化（如预加载、回调钩子）
4. 简化第三方脚本集成

src

指定外部脚本的 URL 的路径字符串

<Script src="https://www.google-analytics.com/analytics.js"/>

strategy

该属性用于控制脚本的加载策略，他有以下几种属性

afterInteractive

strategy 属性的默认值为：afterInteractive，表示在页面渲染成功后加载的脚本

<Script src="https://www.google-analytics.com/analytics.js" strategy="afterInteractive"
/>

beforeInteractive

在页面渲染成功前加载的脚本

lazyOnload

在页面渲染成功且所有脚本加载完成后触发

onLoad

当引入了第三方资源时，我们想在资源加载完毕后执行某些操作时，可以使用 onLoad 回调。它只会触发一次

<Scriptsrc="https://maps.googleapis.com/maps/api/js"onLoad={() => console.log("onLoad")}
/>

onReady

onReady 与 onLoad 类似，不同的是它会在每次路由切换时触发，而 onLoad 只会触发一次

<Scriptsrc="https://maps.googleapis.com/maps/api/js"onReady={() => console.log("onReady")}
/>

代码示例：

下面是一段示例演示两者的区别，首先会进入到 /aaa 页面，随后跳转到 /bbb 页面，此时两个页面的 onLoad 和 onReady 都会被触发。在后续两个页面再进行跳转时，就只会触发 onReady 了

app/aaa/page.tsx

"use client"import Link from "next/link"
import Script from "next/script"export default () => {return (<><h1>AAA</h1><Scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"onLoad={() => console.log("onLoad AAA")}onReady={() => console.log("onReady AAA")}/><Link href="/bbb">Go to BBB</Link></>)
}

app/bbb/page.tsx

"use client"import Link from "next/link"
import Script from "next/script"export default () => {return (<><h1>BBB</h1><Scriptsrc="https://maps.googleapis.com/maps/api/js"onLoad={() => console.log("onLoad BBB")}onReady={() => console.log("onReady BBB")}/><Link href="/aaa">Go to AAA</Link></>)
}

控制台输出结果：

访问 /aaa
onLoad AAA
onReady AAA访问 /bbb
onLoad BBB
onReady BBB跳转到 /aaa
onReady AAA
跳转到 /bbb
onReady BBB

onError

在引入第三方资源加载失败时候触发 onError 回调

<Scriptsrc="https://example.com/script.js"onError={(e: Error) => {console.error('Script failed to load', e)}}
/>

，比例 「4:3」帮我生成一个文章封面