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

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

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

import Script from 'next/script'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

Этот скрипт будет загружен и выполнен при обращении к любому маршруту в вашем приложении. 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 по компромиссам tradeoffs.

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

Встроенные скрипты, или скрипты, не загружаемые из внешнего файла, также поддерживаются компонентом 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" определяется как первая строка кода:

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 или настраиваемые атрибуты данных. Включение любых дополнительных атрибутов автоматически передаст их в конечный, оптимизированный <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"
      />
    </>
  )
}