Componenta <Script> (next/script) – Încărcarea eficientă a scripturilor terțe în Next.js

import Script from 'next/script';

<Script
  src="https://analytics.exemplu.ro/script.js"
  strategy="afterInteractive"
/>

Ce face Componenta <Script> (next/script) - Încărcarea eficientă a scripturilor terțe

Scripturile externe lente blochează adesea firul principal de execuție al browserului.

Componenta <Script> oferă proprietatea strategy care controlează exact momentul lansării scriptului.

Strategia `afterInteractive` (implicită) încarcă scriptul imediat după ce pagina a devenit interactivă; strategia `lazyOnload` îl amână până în perioadele de inactivitate (idle); iar strategia `beforeInteractive` este rezervată librăriilor critice precum polyfills.

Exemple

Exemplul 1: Integrarea Google Tag Manager cu strategia afterInteractive

Previne blocarea randării primului ecran.

import Script from 'next/script';

export default function Analytics() {
  return (
    <Script
      src="https://www.googletagmanager.com/gtag/js?id=G-DEXBLOG2026"
      strategy="afterInteractive"
      onLoad={() => console.log('Analytics încărcat cu succes')}
    />
  );
}

Ieșire în terminal

Scriptul de analiză rulează fără a afecta viteza percepută de utilizator.

Greșeli frecvente

• Folosirea strategiei ‘beforeInteractive’ pe scripturi neesențiale de marketing, încetinind randarea inițială FCP.

Comenzi înrudite

• Componenta <Image> (next/image) - Optimizarea automată a imaginilor: Extinde elementul HTML <img> oferind conversie automată în WebP/AVIF, redimensionare responsivă și eliminarea fenomenului de deplasare a conținutului (CLS).
• Optimizarea fonturilor cu next/font - Self-hosting automat fără cereri externe: Descarcă automat fonturile Google la momentul build-ului și le servește local, eliminând conexiunile externe către serverele Google.