Next.js – Teljesítmény & best practice

A teljes Next.js jegyzet 12–15. fejezetének rövidített változata.

Code splitting & dynamic import

Next.js automatikusan kódszeletel:

• minden page.tsx saját JS bundle,
• csak az adott oldalhoz szükséges kód töltődik le.

Nagy, ritkán használt komponenseket dinamikusan tölts:

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <div>Töltés...</div>,
  ssr: false, // ha csak böngészőben kell (pl. canvas)
});

Kép- és fontoptimalizálás

• Minden képhez next/image – méret, formátum, lazy loading.
• Minden betűtípushoz next/font – build‑time letöltés.

Ezek együtt nagyon sok Core Web Vitals problémát megoldanak (CLS, LCP, FOUT).

Streaming & Suspense

Kerüld, hogy az egész oldal a “leglassabb” adat miatt várjon.

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <FastSection />
      <Suspense fallback={<Skeleton />}>
        <SlowSection />
      </Suspense>
    </div>
  );
}

Cache rétegek – csak a lényege

Next.js alatt több cache réteg van (request memoization, data cache, full route cache, router cache), de a gyakorlatban:

• fetch + cache: 'force-cache' → SSG,
• fetch + next: { revalidate: N } → ISR,
• revalidatePath / revalidateTag → on‑demand frissítés.

Nem kell mindent fejből tudni, inkább tartsd ezt a három szabályt szem előtt.

PPR – Partial Prerendering (koncepció)

Lehetővé teszi, hogy ugyanazon az oldalon:

• egy rész statikusan generálódjon (shell),
• más részek dinamikusan streamelődjenek.

Kísérleti funkció (Next.js 15 környékén stabilizálódik), haladó projekteknél hasznos.

Projektstruktúra – ajánlott minta

src/
├── app/                    # route-ok (page, layout, loading, error, route)
│   ├── (marketing)/        # marketing rész
│   ├── (app)/              # bejelentkezett user rész
│   ├── api/                # Route Handlers
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/                 # alap UI (Button, Input, Card, stb.)
│   └── features/           # feature-specifikus komponensek
├── lib/                    # db, util, külső kliensek, validáció
├── hooks/                  # custom hookok
├── types/                  # közös TS típusok
└── actions/                # Server Action-ök

Elvek:

• Server‑first – minél több logika szerveren,
• colocation – ami együtt mozog, legyen együtt,
• szétválasztott felelősségek – adatlekérés külön, megjelenítés külön,
• TypeScript mindenhol – API‑k, Action‑ök visszatérési értékei is legyenek típusozva.

Gyakori hibák, amiket érdemes kerülni

• Minden komponensre rátenni a "use client"‑et.
• useEffect + fetch mindenre, ahol Server Component is elég lenne.
• next/router használata App Router projektben (next/navigation helyett).
• params/searchParams nem await‑elése Next.js 15‑ben.
• Túl sok, fölösleges useMemo / useCallback.

Rövid checklist új oldal készítésekor

1. Meg tudom oldani Server Componentként?
2. Lehet SSG/ISR a route, vagy tényleg SSR kell?
3. Minden kép next/image?
4. Van értelme streaming‑nek / több Suspense blokk‑nak?
5. Tudom cache‑elni a fetch‑ek eredményét (force-cache / revalidate)?
6. Kerültem a felesleges "use client" és kliens oldali fetch használatát?