Server Components

React Server Components (RSC) sú renderované výhradne na serveri. Žiadny JavaScript sa neposiela do klienta — iba HTML.

Dáta načítané na serveri

Táto stránka volá fetch() priamo v async Server Component — bez useEffect, bez loading state na klientovi.

POST #1 z JSONPlaceholder API:

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto

Kľúčové vlastnosti RSC

  • Async/await priamo v komponente
  • Prístup k databáze, filesystému, API kľúčom
  • Nulový JavaScript bundle pre tento komponent
  • Automatické cachovanie fetch requestov
  • Nie je možné použiť useState, useEffect, event handlery
Ukážka kódu
// app/server-components/page.tsx
// Toto je SERVER COMPONENT (default v App Routeri)

async function getPost() {
  const res = await fetch("https://api.example.com/posts/1", {
    cache: "force-cache", // cache navždy (SSG)
  });
  return res.json();
}

export default async function Page() {
  const post = await getPost(); // async priamo tu!
  return <h1>{post.title}</h1>;
}