Mi az a Next.js?

1. Mi az a Next.js?

A Next.js egy fullstack React framework, amelyet a Vercel fejleszt és tart karban. Az alapötlet egyszerű: vegyük a React deklaratív UI könyvtárát, és egészítsük ki mindazzal, amire egy éles alkalmazásnak szüksége van.

React vs Next.js

A sima React egy UI könyvtár – kezeli a komponenseket, az állapotot és az eseménykezelést. Mindent mást – routingot, adatlekérést, SSR-t, kódmegosztást – neked kell megoldani, vagy külső könyvtárakat kell hozzáadni.

A Next.js mindezeket beépítve hozza:

Mi az a fullstack React framework?

A "fullstack" ebben a kontextusban azt jelenti, hogy ugyanabból a kódbázisból tudsz:

• szerver oldali logikát futtatni (adatbázis lekérések, autentikáció)
• statikus oldalakat generálni build időben
• kliensen interaktív UI-t renderelni
• REST/egyedi API végpontokat kiszolgálni

Mindezt TypeScript-ben, egy projekten belül.

CSR vs SSR – az alapkülönbség

Client-Side Rendering (CSR) – hagyományos React:

1. A böngésző kap egy üres HTML vázat
2. Letölti a JavaScript bundle-t
3. A JS lefut, és rendereli a tartalmat
4. A felhasználó addig fehér képernyőt lát

Server-Side Rendering (SSR) – Next.js:

1. A szerver lefuttatja a React komponenseket
2. Kész HTML-t küld a böngészőnek
3. A tartalom azonnal látható
4. A JS "hidratálja" az oldalt interaktivitáshoz

Az SSR előnyei: jobb SEO, gyorsabb First Contentful Paint, jobb Core Web Vitals.

📝 Összefoglaló – 1. fejezet

• A Next.js egy fullstack React framework, nem csak SSR megoldás
• Beépített routing, adatlekérés, cache, build tooling – nincs szükség külső csomagokra
• A CSR és SSR közötti különbség alapvetően meghatározza az alkalmazás teljesítményét és SEO-ját

---