Server és Client Components

Mit jelent a server és client components?

A React Server Components modellben bizonyos komponensek szerverkörnyezetben renderelődnek és nem kerülnek interaktív komponenskódként a böngészőbundle-ba. Client Component kell többek között kliensstate, event handler vagy bizonyos böngésző API használatához.

Hogyan működik a gyakorlatban?

Next.js App Routerben a komponensfa server/client module graphokra válik. A `'use client'` direktíva klienshatárt jelöl: az adott modul és az általa kliensoldalon szükséges függőségek a client graph részei lehetnek. Server Component átadhat serializálható adatot Client Componentnek.

• Client Component is kaphat szerveren generált kezdeti HTML-t a teljes renderfolyamat részeként.
• Server Component nem használ kliens event handlert vagy useState-et.
• Tartsd a client boundaryt minél lejjebb, ha csak kis interaktív sziget kell.
• Secret és privilegizált adat csak attól biztonságos, hogy szerverkódban marad és nem serializálod kliensre.

Gyakorlati fejlesztői szemlélet

Ne jelöld az egész layoutot `'use client'`-tel csak egy menügomb state-je miatt. Tedd az interaktív elemet kisebb Client Componentbe, így a statikus tartalom és adatfeldolgozás nagyobb része maradhat szerveroldalon.

Gyakori hibák és félreértések

• Server Componentet hagyományos SSR komponenssel teljesen azonosnak tekinteni.
• `use client`-et csak az event handler sor elé képzelni modulhatár helyett.
• Szerveren lekért érzékeny adatot gondolkodás nélkül propként klienskomponensnek átadni.