SSR, CSR, SSG és ISR
SSR, CSR, SSG és ISR vizuálisan: mikor készül el a HTML, honnan jön az adat, és milyen trade-offot jelent SEO, frissesség és teljesítmény között?
Röviden
A rendering módok azt írják le, hol és mikor készül el a felület egy része. CSR-nél sok munka a böngészőben történik; SSR-nél a szerver kéréskor renderel; SSG buildkor készít statikus oldalt; ISR pedig statikus kiszolgálást frissítési mechanizmussal kombinál.
Mit jelent a ssr, csr, ssg és isr?
A rendering módok azt írják le, hol és mikor készül el a felület egy része. CSR-nél sok munka a böngészőben történik; SSR-nél a szerver kéréskor renderel; SSG buildkor készít statikus oldalt; ISR pedig statikus kiszolgálást frissítési mechanizmussal kombinál.
Hol készül el az oldal?
kérés
→
szerver adatot kér
→
HTML render
→
hydration / interakció
Hogyan működik a gyakorlatban?
Nem kell egy teljes alkalmazásnak egyetlen módot választania. Modern frameworkben útvonalanként vagy komponensenként eltérő stratégia is lehet, és cache-szabályok tovább finomítják, mikor történik tényleges szervermunka.
- CSR jó lehet erősen interaktív privát felülethez, de növelheti a kliens JS-függést.
- SSR friss adatot adhat kéréskor, cserébe szervermunka és TTFB számít.
- SSG gyorsan cache-elhető, ha az adat ritkán változik.
- ISR a statikus modellt periodikus vagy eseményvezérelt frissítéssel egészíti ki.
Gyakorlati fejlesztői szemlélet
A választást az adat frissessége, személyre szabottsága, cache-elhetősége és UX-e alapján hozd meg. Ne csak azért legyen minden SSR, mert „SEO”, és ne csak azért minden CSR, mert „app”.
Gyakori hibák és félreértések
- SSR-t automatikusan gyorsabbnak gondolni minden esetben.
- SSG-t olyan privát user-adathoz használni, ami nem közös.
- Rendering stratégia és cache stratégia közti különbséget figyelmen kívül hagyni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy