Co jsou React Server Components?

Co to znamená?

React Server Components (RSC) jsou architektonický koncept v Reactu, který umožňuje renderovat vybrané komponenty přímo na serveru, aniž by se jejich JavaScript odesílal do webového prohlížeče. Cílem je snížit množství přenášeného JavaScriptu, zrychlit načítání stránky a efektivněji pracovat s daty na serveru.

Na rozdíl od klasických React komponentů se Server Components provádějí výhradně na serveru. Výsledkem není JavaScript určený pro prohlížeč, ale již připravený výstup, který React odešle klientovi spolu s informacemi potřebnými pro zobrazení uživatelského rozhraní.

Více info

React Server Components jako nový přístup k renderování

Dlouhá léta fungovaly React aplikace převážně na principu klientského renderování (Client-Side Rendering), při kterém prohlížeč nejprve stáhne JavaScript aplikace a až následně vytvoří výsledné uživatelské rozhraní.

Server-Side Rendering (SSR) tento proces zrychlil tím, že HTML stránku vygeneruje server ještě před jejím odesláním uživateli.

React Server Components řeší jinou část problému.

Místo toho, aby se všechny komponenty přenášely do prohlížeče, umožňují ponechat část aplikace výhradně na serveru. Do klienta se tak neposílá JavaScript komponentů, které nepotřebují interaktivitu.

Výsledkem může být menší objem přenášených dat, rychlejší načítání aplikace a nižší nároky na výkon uživatelského zařízení.

Jak funguje práce s daty na serveru bez zbytečného JavaScriptu?

Jednou z hlavních výhod React Server Components je možnost pracovat s daty přímo na serveru.

Server Component může načíst údaje z databáze, API nebo jiného zdroje ještě před samotným renderováním. Protože se vykonává výlučně na serveru, není třeba odesílat do prohlížeče kód na získávání dat ani citlivou logiku aplikace.

Tento přístup přináší několik výhod:

menší objem JavaScriptu odesílaného do prohlížeče,
rychlejší načítání stránky,
jednodušší přístup k databázím nebo interním API,
vyšší bezpečnost, protože serverový kód neopouští server.

Vývoj webů od ui42: Moderní technologie bez kompromisů

Zjistit více

Interaktivní části aplikace, jako formuláře, filtry nebo uživatelské rozhraní reagující na kliknutí, zůstávají implementovány jako Client Components.

Server Components, SSR a Client Components: hlavní rozdíly

Ačkoliv se tyto pojmy často zaměňují, řeší odlišné úkoly.

Přístup	Kde se vykonává	Posílá se JavaScript do prohlížeče?	Typické využití
Server Components	server	jen pro Client Components	načítání dat, statické části rozhraní
Server-Side Rendering (SSR)	server	ano	rychlé zobrazení HTML při první návštěvě
Client Components	prohlížeč	ano	interaktivní uživatelské rozhraní

Server Components tedy nenahrazují SSR. React je navrhl tak, aby se mohly navzájem doplňovat. SSR řeší způsob doručení HTML uživateli, zatímco Server Components snižují množství JavaScriptu potřebného k vykreslení aplikace.

Kdy se React Server Components vyplatí?

React Server Components přinášejí největší přínos při aplikacích, které pracují s velkým objemem dat nebo obsahují rozsáhlé uživatelské rozhraní.

Vhodné jsou například pro:

e-commerce platformy,
administrativní systémy,
obsahové portály,
dashboardy,
aplikace využívající frameworky jako Next.js.

Při správném návrhu architektury umožňují kombinovat výhody serverového zpracování dat s interaktivitou klientských komponentů, což vede k lepšímu výkonu aplikace i uživatelské zkušenosti.