Next.js RSC v Praxi: Blesková Rychlost a Vyšší Konverze Webů

1. Co jsou Server Components?

Tradičně se celý React renderoval v prohlížeči (Client-Side Rendering). Server Components se renderují na serveru a do prohlížeče posílají jen hotové HTML.

Rozdíl mezi Client a Server Components:

2. Kdy použít Server Components?

Pravidlo je jednoduché: výchozí volbou jsou Server Components, Client Components jen když potřebujete interaktivitu.

✅ Použijte Server Component pro:

• Načítání dat z databáze (Prisma, SQL)
• Zobrazení statického obsahu (blog, produkty)
• Použití tajných klíčů (API keys) – bezpečně na serveru
• Velké knihovny (markdown parsery, zpracování obrázků)

✅ Použijte Client Component pro:

• Formuláře (onChange, onSubmit)
• Animace (Framer Motion, GSAP)
• useState, useEffect, useContext
• Event listenery (onClick, onScroll)

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!