Next.js rendering és cache
Next.js rendering és cache fogalmi térkép: static vs dynamic, request memoization/data cache/router cache jellegű rétegek és miért kell mindig az aktuális router dokumentációját nézni.
Röviden
Next.js több rétegben hozhat rendering és cache döntéseket. A részletes API és defaultok router- és verziófüggők, ezért tartós tudásként azt érdemes megtanulni, milyen adat frissességi és személyre szabási igénye van az oldalnak, majd ezt leképezni az aktuális framework mechanizmusaira.
Mit jelent a next.js rendering és cache?
Next.js több rétegben hozhat rendering és cache döntéseket. A részletes API és defaultok router- és verziófüggők, ezért tartós tudásként azt érdemes megtanulni, milyen adat frissességi és személyre szabási igénye van az oldalnak, majd ezt leképezni az aktuális framework mechanizmusaira.
Rendering stratégia
kérés
→
szerver adatot kér
→
HTML render
→
hydration / interakció
Hogyan működik a gyakorlatban?
Static rendering előre vagy cache-elt módon újrahasznosítható outputot adhat; dynamic rendering request-specifikus adatot kezelhet. Adatfetch és route output külön cache policyt kaphat, revalidation pedig idő- vagy eseményalapú frissítést adhat az adott API szerint.
- Public, sokaknak azonos adat jól cache-elhető.
- User-private adat cache kulcs és scope nélkül veszélyes.
- Revalidation nem ugyanaz, mint minden kliens azonnali real-time frissítése.
- Cache invalidationt tartalomfrissítési flow-val együtt tervezz.
Gyakorlati fejlesztői szemlélet
Minden route-nál írd le négy kérdéssel: személyre szabott? mennyire friss kell? mennyibe kerül előállítani? megosztható más userrel? Ebből sokkal könnyebb helyes caching stratégiát választani, mint API nevekből kiindulni.
Gyakori hibák és félreértések
- Framework cache-t fekete dobozként kezelni.
- Személyes response-t megosztott cache-be engedni.
- Régi tutorial defaultjait aktuális Next.js verzióra változatlanul feltételezni.
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