A modern webalkalmazások fejlesztése során a sebesség, a skálázhatóság és a kiváló felhasználói élmény kulcsfontosságú. A React alapú alkalmazások építésének egyik legnépszerűbb és legerősebb eszköze a Next.js, amely nem csupán egy keretrendszer, hanem egy komplex ökoszisztéma, ami a fejlesztői munkafolyamat szinte minden aspektusát megkönnyíti. A Next.js egyik legnagyobb erőssége abban rejlik, hogy intelligensen kezeli az adatbetöltést és a renderelést, lehetővé téve a fejlesztők számára, hogy kiváló teljesítményű és SEO-barát weboldalakat hozzanak létre.
Ennek a rugalmasságnak a középpontjában két kulcsfontosságú függvény áll: a getStaticProps és a getServerSideProps. Bár mindkettő arra szolgál, hogy adatokat töltsön be egy Next.js oldalra még a kliens oldalra való elküldés előtt (pre-rendering), működésük, felhasználási eseteik és az általuk nyújtott előnyök jelentősen eltérnek. Cikkünkben alaposan körüljárjuk ezeket a különbségeket, segítve Önt abban, hogy tudatosan válassza ki az alkalmazásához legmegfelelőbb adatbetöltési stratégiát.
Miért fontos a Pre-rendering a Next.js-ben?
Mielőtt mélyebbre ásnánk a getStaticProps és getServerSideProps rejtelmeibe, érdemes megérteni, miért is olyan fontos a pre-rendering. Hagyományosan, egy React alkalmazás teljes mértékben a kliens oldalon renderelődik (Client-Side Rendering, CSR). Ez azt jelenti, hogy a böngésző először letölt egy üres HTML fájlt és a JavaScript kódokat, majd a JavaScript futása után kezdi el felépíteni a tényleges tartalmat. Ennek a megközelítésnek hátrányai vannak:
- SEO problémák: A keresőmotorok (például a Google) nehezebben indexelik azokat az oldalakat, amelyek kezdetben üresek, mivel a tartalom csak a JavaScript futtatása után jelenik meg.
- Lassabb betöltés: A felhasználók hosszabb ideig látnak egy üres képernyőt, ami rontja a felhasználói élményt és növeli a visszapattanási arányt.
A Next.js éppen ezért vezette be a pre-rendering koncepcióját, ami azt jelenti, hogy az oldalak HTML kódja már a szerveren generálódik le, még mielőtt a böngészőbe érkezne. Ez két fő módon történhet:
- Static Site Generation (SSG): Statikus oldalak generálása build időben.
- Server-Side Rendering (SSR): Szerver oldali renderelés minden kérésre.
A getStaticProps az SSG-hez, míg a getServerSideProps az SSR-hez kapcsolódik. Lássuk most részletesen mindkét megközelítést!
A `getStaticProps` – Statikus tartalom a sebesség bajnoka
A getStaticProps egy aszinkron függvény, amelyet kizárólag a Next.js oldalak (page components) exportálhatnak. Fő jellemzője, hogy build időben fut le. Ez azt jelenti, hogy amikor a Next.js alkalmazást buildeli a deploymenthez, a getStaticProps lekéri a szükséges adatokat, és ezekkel az adatokkal együtt generálja le az oldal statikus HTML változatát. Az így létrejött HTML fájlokat ezután hatékonyan kiszolgálhatja egy CDN (Content Delivery Network).
Hogyan működik a `getStaticProps`?
Amikor a fejlesztő lefuttatja a next build parancsot, a Next.js átvizsgálja az összes oldalt, és ahol getStaticProps függvényt talál, ott lefuttatja azt. A függvény által visszaadott adatokat (általában egy props objektumban) az oldal komponense megkapja, és ezekkel az adatokkal együtt generálódik le az oldal HTML-je és a hozzá tartozó JSON fájl. Ezek a fájlok lesznek azok, amelyeket a szerver (vagy CDN) a felhasználók felé kiszolgál.
// pages/blog/[slug].js
export async function getStaticProps(context) {
// Adatok lekérése API-ról, adatbázisból, fájlból, stb.
const res = await fetch(`https://api.example.com/posts/${context.params.slug}`);
const post = await res.json();
if (!post) {
return {
notFound: true,
};
}
return {
props: {
post,
},
// Opcionálisan: Incremental Static Regeneration beállítása
revalidate: 60, // Az oldal 60 másodpercenként újra generálódik, ha új kérés érkezik
};
}
// Statikus útvonalak generálása
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { slug: post.slug },
}));
return { paths, fallback: 'blocking' };
}
Mikor használd a `getStaticProps`-ot?
- Statikus, ritkán változó tartalom: Blogbejegyzések, termékoldalak (amennyiben az árak vagy készletinformációk nem igényelnek valós idejű frissítést minden kérésnél), landing oldalak, dokumentációk.
- Nyilvános adatok: Olyan adatok, amelyek minden felhasználó számára azonosak és nem tartalmaznak érzékeny, felhasználóspecifikus információkat.
- SEO prioritás: Ha a keresőoptimalizálás elsődleges szempont, mivel a teljes HTML tartalom már a build időben elkészül.
- Maximális teljesítmény: Amikor a sebesség a legfontosabb, és az adatok gyorsan kiszolgálhatók CDN-ről.
A `getStaticProps` előnyei:
- Elképesztő sebesség: A HTML fájlok build időben generálódnak és CDN-ről szolgálhatók ki, így a felhasználók rendkívül gyorsan megkapják a tartalmat.
- Kiváló SEO: A keresőrobotok azonnal hozzáférnek a teljes, előre renderelt tartalomhoz.
- Skálázhatóság: A szerverre eső terhelés minimális, mivel nincsen szükség minden kérésre a renderelésre. A statikus fájlok könnyedén skálázhatók.
- Költséghatékony: CDN használatával jelentősen csökkenthetők a szerver üzemeltetési költségek.
- Megbízhatóság: Statikus tartalom lévén kevésbé sérülékeny a futásidejű hibákra.
A `getStaticProps` hátrányai:
- Adatok frissítése: Ha az adatok változnak, az oldal frissítéséhez egy új buildre van szükség. Ez nagyobb alkalmazásoknál időigényes lehet.
- Nem alkalmas dinamikus, valós idejű tartalomra: Felhasználóspecifikus adatok vagy gyakran változó információk (pl. tőzsdei árfolyamok) esetében nem ideális.
- Build idő növekedése: Nagyszámú oldal esetén a build folyamat jelentősen meghosszabbodhat.
Incremental Static Regeneration (ISR) – A `getStaticProps` evolúciója
A Next.js bevezette az Incremental Static Regeneration (ISR) funkciót, amely áthidalja a statikus oldalak frissítési problémáját. Az ISR lehetővé teszi, hogy a getStaticProps által generált oldalak bizonyos időközönként, a háttérben újra generálódjanak anélkül, hogy új buildre lenne szükség. Ezt a revalidate opcióval állíthatjuk be (pl. revalidate: 60), ami azt jelenti, hogy az oldal legalább 60 másodpercenként frissül, ha új kérés érkezik rá. Ez a megoldás a statikus oldalak sebességét kombinálja a dinamikus tartalom frissíthetőségével.
A `getServerSideProps` – Dinamikus tartalom minden kérésre
A getServerSideProps szintén egy aszinkron függvény, amelyet egy Next.js oldal exportálhat. Azonban ellentétben a getStaticProps-szal, ez a függvény minden egyes kérésre lefut a szerver oldalon. Amikor egy felhasználó meglátogat egy ilyen oldalt, a Next.js szerver lefuttatja a getServerSideProps-ot, lekéri az adatokat, azokkal együtt rendereli az oldalt HTML-be, majd elküldi azt a böngészőnek.
Hogyan működik a `getServerSideProps`?
Amikor egy felhasználó kérést küld egy getServerSideProps-ot használó oldalra, a Next.js szerver elfogja a kérést. Lefuttatja a getServerSideProps függvényt, ami lekérheti az adatokat egy API-ról, adatbázisból, vagy bármilyen külső forrásból. Az így kapott adatokat ezután a szerver oldalon átadja az oldal komponensnek, amely azonnal HTML-be renderelődik. Ez a HTML, a hozzá tartozó CSS és JavaScript kóddal együtt kerül elküldésre a felhasználó böngészőjébe. Ez azt jelenti, hogy a felhasználó mindig a legfrissebb adatokat látja.
// pages/profile/[username].js
export async function getServerSideProps(context) {
// Adatok lekérése API-ról a request pillanatában
const res = await fetch(`https://api.example.com/users/${context.params.username}`);
const user = await res.json();
if (!user) {
return {
notFound: true,
};
}
return {
props: {
user,
},
};
}
Mikor használd a `getServerSideProps`-ot?
- Dinamikus, valós idejű tartalom: Olyan oldalak, ahol a tartalom gyakran változik vagy valós idejű frissítést igényel (pl. hírfolyamok, tőzsdei adatok, sporteredmények).
- Felhasználóspecifikus adatok: Profil oldalak, kosarak, felhasználói irányítópultok, ahol az adatok a bejelentkezett felhasználótól függenek.
- Hitelesítést igénylő oldalak: Ha az adatok lekéréséhez vagy megjelenítéséhez felhasználói autentikációra van szükség, vagy ha a tartalom függ a felhasználó jogosultságaitól.
- Kritikus frissesség: Amikor az adatok frissessége létfontosságú, és nem engedhető meg, hogy a felhasználók akár csak pillanatokra is elavult információt lássanak.
A `getServerSideProps` előnyei:
- Mindig friss adatok: Minden kérésre új adatok töltődnek be, biztosítva a maximális frissességet.
- Dinamikus tartalom: Ideális felhasználóspecifikus és valós idejű adatok megjelenítésére.
- Jó SEO: A teljes HTML tartalom már a szerveren renderelődik, így a keresőrobotok számára is olvasható marad.
- Biztonság: Érzékeny adatok (pl. API kulcsok) biztonságosan kezelhetők a szerveren, anélkül, hogy a kliens oldalra kerülnének.
A `getServerSideProps` hátrányai:
- Lassabb teljesítmény: Mivel minden kérésre a szervernek adatot kell lekérnie és oldalt kell renderelnie, ez lassíthatja a betöltési időt a statikus oldalakhoz képest.
- Nagyobb szerverterhelés: Minden felhasználói kérés terheli a szervert, ami skálázhatósági problémákhoz vezethet nagy forgalom esetén.
- Magasabb költségek: A folyamatos szerverhasználat miatt magasabbak lehetnek az üzemeltetési költségek.
- Cache-elés kihívásai: A dinamikus tartalom miatt nehezebb hatékonyan cache-elni a CDN-eken.
Az alapvető különbségek összefoglalva
Ahhoz, hogy a lehető legjobb döntést hozza meg, tekintsük át egy összefoglaló táblázatban a két függvény legfontosabb különbségeit:
| Jellemző | getStaticProps (SSG) |
getServerSideProps (SSR) |
|---|---|---|
| Futtatás ideje | Build időben (egyszeri alkalommal) | Minden kérésre, a szerveren |
| Adatok frissessége | Build időben rögzített (ISR-rel frissíthető) | Mindig a legfrissebb, valós idejű |
| Teljesítmény | Kiemelkedően gyors (CDN-ről kiszolgálható) | Lassabb, mint az SSG (szerver oldali munka minden kérésre) |
| Cache-elés | Könnyen cache-elhető CDN-eken | Nehezebben cache-elhető, mivel egyedi minden kérésre |
| Skálázhatóság | Kiváló (statikus fájlok skálázása egyszerű) | Nagyobb kihívás nagy forgalom esetén (szerver terhelés) |
| SEO | Kiváló (teljes HTML már buildkor) | Kiváló (teljes HTML már a kérésre) |
| Felhasználási esetek | Blogok, dokumentáció, statikus landing oldalak, e-commerce termékek (ha ritkán változnak) | Felhasználói profilok, dashboardok, valós idejű hírfolyamok, hitelesített oldalak |
| Build idő | Hosszabb lehet nagy számú oldal esetén | Nincs külön build idő az oldalak generálására |
| Szerver terhelés | Minimális futásidőben | Jelentős, növekszik a forgalommal |
Mikor melyiket válaszd? – Döntési segédlet
A megfelelő választás nem mindig egyértelmű, de néhány kulcskérdés segíthet a döntésben:
- Az adatok gyakran változnak?
- Ha IGEN, és valós idejű frissességre van szükség: Válassza a
getServerSideProps-ot. - Ha NEM, vagy ha a néhány perces/órás késleltetés elfogadható (ISR-rel): Válassza a
getStaticProps-ot.
- Ha IGEN, és valós idejű frissességre van szükség: Válassza a
- Az adatok felhasználóspecifikusak?
- Ha IGEN (pl. személyes profil, kosár tartalma): Válassza a
getServerSideProps-ot. - Ha NEM (mindenki ugyanazt látja): Válassza a
getStaticProps-ot.
- Ha IGEN (pl. személyes profil, kosár tartalma): Válassza a
- A teljesítmény és a skálázhatóság a legfontosabb?
- Ha IGEN, és statikus tartalomról van szó: Válassza a
getStaticProps-ot. - Ha a frissesség fontosabb a nyers sebességnél és van szerver kapacitás: Válassza a
getServerSideProps-ot.
- Ha IGEN, és statikus tartalomról van szó: Válassza a
- Mennyire kritikus a SEO?
- Mindkettő kiváló SEO szempontjából, mivel mindkettő előre rendereli a tartalmat. A választást más szempontok fogják eldönteni.
Hibrid megközelítések és további tippek
Fontos megjegyezni, hogy nem kell kizárólagosan az egyik vagy másik megoldás mellett elköteleződni az egész alkalmazáson belül. A Next.js ereje abban rejlik, hogy kombinálhatja ezeket a stratégiákat:
- Egy blogon a bejegyzések oldalai használhatják a
getStaticProps-ot (SSG), míg a felhasználói kommentek vagy a valós idejű látogatottsági adatok betölthetők kliens oldalon (Client-Side Rendering) a React SWR vagy React Query hookok segítségével. - Egy e-commerce weboldalon a terméklista oldalak (áttekintés) generálódhatnak
getStaticProps-szal (ISR-rel a készletfrissítés miatt), míg a kosár és a fizetési oldalak agetServerSideProps-ot használhatják a felhasználóspecifikus adatok miatt. - A Next.js 13+ bevezette a React Server Components és Streaming SSR koncepcióját, ami tovább finomítja a szerver oldali renderelést, lehetővé téve a komponensek szintű, részleges renderelést és streamelést, optimalizálva a teljesítményt a bonyolultabb, dinamikus oldalakon is.
Ez a rugalmasság adja a Next.js igazi erejét, lehetővé téve a fejlesztők számára, hogy minden egyes oldalra a legoptimálisabb adatbetöltési stratégiát válasszák.
Konklúzió
A getStaticProps és a getServerSideProps a Next.js két rendkívül erőteljes funkciója, amelyek alapvetően meghatározzák webalkalmazásának teljesítményét, skálázhatóságát és SEO profilját. Nincs univerzálisan „jobb” választás; a kulcs az, hogy megértse mindkét megközelítés mögöttes filozófiáját, előnyeit és hátrányait, majd ezek alapján tudatos döntést hozzon az adott felhasználási esetre. A statikus oldalak sebessége és cache-elhetősége, vagy a dinamikus tartalom valós idejű frissessége a prioritás? A választás az Ön kezében van, és a Next.js a szükséges eszközöket mindkét esetben biztosítja, hogy a lehető legjobb felhasználói élményt nyújthassa.
A webfejlesztés folyamatosan fejlődik, és a Next.js élen jár ebben az evolúcióban. A megfelelő adatbetöltési stratégia kiválasztása nem csupán technikai döntés, hanem egyben stratégiai lépés is, amely befolyásolja az alkalmazás sikerét és fenntarthatóságát hosszú távon.
Leave a Reply