揭秘 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 回调。它只会触发一次

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

onReady

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

<Script
    src="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>

      <Script
        src="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>

      <Script
        src="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 回调

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