Оптимизация скриптов

Скрипты макета

Для загрузки стороннего скрипта для нескольких маршрутов, импортируйте next/script и включите скрипт напрямую в ваш компонент макета:

import Script from 'next/script'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

Сторонний скрипт загружается, когда пользователь обращается к маршруту папки (например, dashboard/page.js) или любому вложенному маршруту (например, dashboard/settings/page.js). Next.js гарантирует, что скрипт будет загружен только один раз, даже если пользователь переходит между несколькими маршрутами в одном и том же макете.

Скрипты приложения

Для загрузки стороннего скрипта для всех маршрутов, импортируйте next/script и включите скрипт напрямую в ваш основной макет:

import Script from 'next/script'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

Этот скрипт будет загружен и выполнен, когда будет доступен любой маршрут в вашем приложении. Next.js гарантирует, что скрипт будет загружен только один раз, даже если пользователь переходит между несколькими страницами.

Рекомендация: Мы рекомендуем включать сторонние скрипты только на определенных страницах или в макетах, чтобы свести к минимуму ненужное влияние на производительность.

Стратегия

Хотя по умолчанию next/script позволяет загружать сторонние скрипты на любой странице или в любом макете, вы можете настроить поведение загрузки, используя свойство strategy:

beforeInteractive: Загрузить скрипт до любого кода Next.js и до любой гидратации страницы.
afterInteractive: (по умолчанию) Загрузить скрипт в начале, но после того, как произойдёт гидратация страницы.
lazyOnload: Загрузить скрипт позже, во время простоя браузера.
worker: (экспериментально) Загрузить скрипт в веб-воркере.

Обратитесь к документации справки API next/script, чтобы узнать больше о каждой стратегии и их вариантах использования.

Выгрузка скриптов в веб-воркер (экспериментально)

Предупреждение: Стратегия worker ещё не стабильна и пока не работает с каталогом app. Используйте с осторожностью.

Скрипты, использующие стратегию worker, выводятся и выполняются в веб-воркере с помощью Partytown. Это может улучшить производительность вашего сайта, назначив основной поток остальной части кода вашего приложения.

Эта стратегия всё ещё находится на стадии эксперимента и может быть использована только в том случае, если флаг nextScriptWorkers включен в next.config.js:

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

Затем выполните next (обычно npm run dev или yarn dev), и Next.js проведет вас через установку необходимых пакетов для завершения настройки:

npm run dev

Вы увидите инструкции, похожие на эту: Пожалуйста, установите Partytown, выполнив npm install @builder.io/partytown

После завершения настройки определение strategy="worker" автоматически инициализирует Partytown в вашем приложении и выгрузит скрипт в веб-воркер.

import Script from 'next/script'
 
export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

При загрузке стороннего скрипта в веб-воркер необходимо учитывать ряд компромиссов. Для получения дополнительной информации см. документацию Partytown по компромиссам.

Встроенные скрипты

Встроенные скрипты, или скрипты, не загруженные из внешнего файла, также поддерживаются компонентом Script. Их можно написать, поместив JavaScript в фигурные скобки:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

Или используя свойство dangerouslySetInnerHTML:

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

Предупреждение: Для встроенных скриптов должно быть задано свойство id, чтобы Next.js смог отслеживать и оптимизировать скрипт.

Выполнение дополнительного кода

Обработчики событий могут использоваться с компонентом Script для выполнения дополнительного кода после возникновения определенного события:

onLoad: Выполнить код после завершения загрузки скрипта.
onReady: Выполнить код после завершения загрузки скрипта и при каждом подключении компонента.
onError: Выполнить код, если скрипт не загрузится.

Эти обработчики будут работать только когда импортирован next/script и используется внутри компонента клиента, где "use client" определен в первой строке кода:

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

Обратитесь к справке API next/script, чтобы узнать больше о каждом обработчике событий и посмотреть примеры.

Дополнительные атрибуты

Существует множество атрибутов DOM, которые можно назначить элементу <script>, которые не используются компонентом Script, например, nonce или пользовательские атрибуты данных data-*. Включение любых дополнительных атрибутов автоматически передаст их в окончательный, оптимизированный элемент <script> который включён в HTML.

import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/building-your-application/optimizing/scripts