Вопрос проверяет знание механизмов добавления критически важных сторонних скриптов (например, для аналитики или A/B-тестов), которые должны загрузиться и выполниться как можно раньше в процессе рендеринга страницы.
Для скриптов, критичных к самому раннему выполнению, используется компонент next/script с стратегией beforeInteractive. Он вставляет скрипт в элемент <head> исходного HTML-документа, и тот выполняется до гидратации React-приложения.
Компонент next/script — это расширение обычного HTML-тега <script>, которое предоставляет контроль над тем, когда и как загружать сторонние скрипты.
Стратегии загрузки (strategy):
beforeInteractive: Для скриптов, которые должны выполниться до того, как страница станет интерактивной (до гидратации React). Это самый ранний момент.
Примеры: Скрипты для тестирования доступности, ботов, некоторых видов аналитики.
Размещение: Вставляется в <head> серверного HTML.
afterInteractive (по умолчанию): Для скриптов, которые можно выполнить после того, как страница стала интерактивной.
Примеры: Большинство аналитических скриптов (Google Analytics, Yandex.Metrika).
Размещение: Вставляется в конце <body> и выполняется после гидратации.
lazyOnload: Для скриптов, которые можно загрузить в фоновом режиме, когда все другие ресурсы уже загружены.
Примеры: Скрипты для чат-виджетов, отзывов.
Размещение: Загружается в idle time.
Пример использования beforeInteractive:
// В корневом layout (app/layout.js)
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{/* Этот скрипт выполнится максимально рано */}
<Script
src="https://example.com/critical-script.js"
strategy="beforeInteractive"
/>
{children}
</body>
</html>
);
}Важно: Используйте beforeInteractive с осторожностью и только для действительно критичных скриптов, так как они могут блокировать основной поток и замедлять загрузку.