React Server Components (RSC) atrenduojami tik serveryje — jų JavaScript niekada neiš siunčiama į naršyklę. App Router, kiekvienas komponentas yra Server Component pagal numatymo nustatą; jūs aiškiai pasirenkate kliento elgesį.
db ;
() {
users = db..();
(
);
}
Server Components gali būti async, tiesiogiai await duomenys ir pasiekti tik serverio išteklius (duomenų bazė, failų sistema, paslaptys) — nes jie veikia serveryje. Nereikalingas API sluoksnis duomenims gauti, o paslaptys niekada nepasiekia kliento.
Naršyklė gauna atrenduotą HTML/UI, ne komponento kodą ar jo priklausomybes. Server Component, kuris naudoja sunkią markdown arba date biblioteką, nesiuส‡cia jokios tos bibliotekos dalies į naršyklę — dramatiškai sumažina paketo dydį.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Nėra interaktyvumo, būsenos, efektų ar naršyklės API — tai reikalinga kliento komponentui.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
Šablonas: Server Components tvarko duomenis/struktūrą; įterpkite kliento komponentus tik ten, kur reikalingas interaktyvumas ("salos").
Server Components yra App Router apibrėžianti savybė.
Jie sumažina kliento paketo dydį (mažiau JS atsisiųsti/analizuoti), leidžia tiesioginį, saugų serverio pusės duomenų prieigą be API ir pagerina našumą bei SEO.
Žinoti, kad jie yra numatytieji — ir kas verčia komponentą būti kliento komponentu — yra pagrindinė App Router programų efektyviam struktūrizavimui.