Next.js Server Components (RSC): Revoluce ve vývoji React aplikací

3. Praktický příklad: Blog s RSC

Tradičně blog v Reactu vyžadoval:

1. Načíst data z API (fetch v useEffect)
2. Zobrazit loading spinner
3. Vykreslit data
4. Poslat celý React do prohlížeče (~200kB)

Se Server Components:

// app/blog/page.tsx (Server Component)
async function BlogPage() {
  // Přímý dotaz do DB – na serveru!
  const posts = await prisma.post.findMany()
  
  return (
    <div>
      {posts.map(post => (
        <Article key={post.id} post={post} />
      ))}
    </div>
  )
}

                

Výsledek: Stránka se načte okamžitě, bez JavaScriptu, bez loading spinnerů!

4. Streaming a Suspense

RSC umožňuje streaming – posílání HTML po částech, jakmile je připraveno:

<Suspense fallback={<Skeleton />}>
  <SlowComponent /> {/* Renderuje se async */}
</Suspense>

                

Uživatel vidí stránku hned a pomalé komponenty se „dočítají" na pozadí.

5. Obchodní přínosy RSC

• SEO: Google vidí plné HTML okamžitě (nemusí čekat na JavaScript)
• Výkon: Core Web Vitals 100/100 bez námahy
• Náklady: Méně zátěže serveru (cache na edge)
• UX: Okamžité načítání = vyšší konverze

Závěr: Server Components jsou budoucnost Reactu. Firmy používající Next.js 13+ s RSC mají výhodu v rychlosti, SEO a nákladech. Je čas na migraci!