Optimización de scripts de terceros
Muchas aplicaciones dependen de JavaScript de terceros para incluir diferentes tipos de funcionalidades, como análisis, anuncios y widgets de atención al cliente. Sin embargo, incrustar código de terceros puede retrasar la renderización del contenido de la página y afectar el rendimiento del usuario si se carga demasiado pronto.
Next.js proporciona un componente Script integrado que optimiza la carga de cualquier script de terceros, al mismo tiempo que ofrece a los desarrolladores la opción de decidir cuándo recuperarlo y ejecutarlo.
Uso del componente Script
Usando HTML regular, los scripts externos tendrían que agregarse manualmente a next/head:
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<script src="https://www.googletagmanager.com/gtag/js?id=123" />
</Head>
</div>
);
}Con el componente Script de Next.js, puedes agregarlo en cualquier parte del componente sin necesidad de usar next/head:
import Script from 'next/script';
function IndexPage() {
return (
<div>
<Script
strategy="afterInteractive"
src="https://www.googletagmanager.com/gtag/js?id=123"
/>
</div>
);
}El componente Script introduce una propiedad strategy que te permite decidir cuándo recuperar y ejecutar un script para una carga óptima. Para no afectar negativamente al Largest Contentful Paint (LCP), la mayoría de los scripts de terceros deberían diferirse para cargar después de que todo el contenido de una página haya terminado de cargarse, ya sea inmediatamente después de que la página se vuelva interactiva (strategy="afterInteractive") o de manera diferida durante el tiempo de inactividad del navegador (strategy="lazyOnload").
Lecturas adicionales
- Next.js: Componente Script
- Next.js: Referencia de API para
next/script