React Server Components (RSC) renderöidään vain palvelimella — niiden JavaScript ei koskaan lähetä selaimelle. App Routerissa jokainen komponentti on Server Component oletuksena; valitset asiakasohjelmiston käyttäytymisen nimenomaisesti.
db ;
() {
users = db..();
(
);
}
Server Components voivat olla asynkronisia, await tietoja suoraan ja käyttää vain palvelimen resursseja (tietokanta, tiedostojärjestelmä, salaisuudet) — koska ne suoritetaan palvelimella. API-kerrosta ei tarvita tietojen hakemiseksi, ja salaisuudet eivät koskaan päädy asiakkaalle.
Selain vastaanottaa renderöidyn HTML/UI-näkymän, ei komponentin koodia tai sen riippuvuuksia. Server Component, joka käyttää raskasta markdown- tai date-kirjastoa, ei läheta mitään kyseisestä kirjastosta selaimelle — pienentää bundle-koon dramaattisesti.
// ❌ 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
Ei interaktiivisuutta, state-tilaa, effecteja tai selaimen API:ta — nämä vaativat Client Componentin.
// 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} /></>;
}
Kuvio: Server Components käsittelevät tietoja/rakennetta; upota Client Components vain silloin, kun interaktiivisuus tarvitaan ("islands").
Server Components ovat App Routerin määrittelevä ominaisuus.
Ne pienentävät asiakaspuolen bundle-kokoa (vähemmän JS:ää ladata/jäsentää), sallivat suoran, turvallisen palvelinpuolen tietojen käytön ilman API:ta ja parantavat suorituskykyä ja SEO-optimointia.
Tieto siitä, että ne ovat oletusarviona — ja mikä pakottaa komponentin olemaan Client Component — on perustavanlaatuinen App Router-sovellusten tehokkaalle rakenteelle.