揭秘 NextJS Script 组件
揭秘 NextJS Script 组件
Next.js 的 Script 组件是对原生 <script> 标签的增强封装，主要区别和优势如下：
- 自动优化加载策略（支持按需/延迟加载）
- 避免重复加载
- 内置性能优化（如预加载、回调钩子）
- 简化第三方脚本集成
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」帮我生成一个文章封面