Zašto je vaša Next.js aplikacija spora (i kako je ubrzati)

Next.js pruža moćne alate out-of-the-box, ali ne čini vašu aplikaciju automatski brzom. Ako vam Lighthouse rezultat pada ili korisnici doživljavaju nagle pomake u layoutu, možda upadate u uobičajene zamke performansi.

U ovom ćemo postu otkriti glavni razlozi zašto Next.js aplikacije usporavaju i kako ih možete popraviti koristeći moderni App Router.

---

1. Pretjerano korištenje Client komponenti ("use client")

Glavni ubojica performansi u modernim Next.js aplikacijama jest stavljanje "use client" direktive na vrh svake datoteke samo radi korištenja hookova.

❌ Pogreška:

Pretvaranje cijelog stabla stranice u Client komponente, što drastično povećava veličinu JavaScript paketa (bundle) i prebacuje sav teret renderiranja na preglednik korisnika.

✅ Rješenje:

Držite komponente kao Server komponente prema zadanim postavkama. Spustite "use client" što niže u stablo komponenti — isključivo na interaktivne čvorove (gumbi, unosi, prekidači).

---

2. Neoptimizirane slike i nedostajuće dimenzije

Slike čine većinu preuzetih podataka na webu. Korištenje standardnih HTML <img> oznaka uništava vaše metrike performansi (LCP).

❌ Pogreška:

Učitavanje golemih nekomprimiranih PNG datoteka bez eksplicitnih širina i visina.

✅ Rješenje:

Uvijek koristite ugrađenu Next.js <Image /> komponentu uz odgovarajuće atribute veličina (sizes).

---

3. Neoptimizirano dohvaćanje podataka (Waterfalls)

Dohvaćanje podataka sekvencijalno unutar komponenti stvara mrežne zastoje gdje preglednik mora čekati završetak Zahtjeva A prije početka Zahtjeva B.

❌ Pogreška:

Višestruki zavisni await fetch() pozivi bez paralelizacije.

✅ Rješenje:

Koristite Promise.all() za istovremeno dohvaćanje neovisnih podataka:

async function getData(postId: string) {
  const [postData, commentsData] = await Promise.all([
    fetch(`[https://api.example.com/posts/$](https://api.example.com/posts/$){postId}`),
    fetch(`[https://api.example.com/posts/$](https://api.example.com/posts/$){postId}/comments`),
  ]);

  return {
    post: await postData.json(),
    comments: await commentsData.json(),
  };
}

---

💡 Zaključak

Optimizacija Next.js aplikacije nije čarolija; to je stvar discipline s poslužiteljskim komponentama, ispravnim rukovanjem slikama i čistim tokovima podataka.