Frontend Academy · Lekcja

Komponenty serwerowe i klienckie

Pozna Pan/Pani React Server Components, dowie się, kiedy dodać dyrektywę 'use client' oraz jak łączyć renderowany na serwerze HTML z interaktywnymi wyspami klienckimi.

Komponenty serwerowe i klienckie to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dwa światy w jednej aplikacji

React Server Components (RSC) pozwalają podzielić drzewo komponentów na części renderowane na serwerze i interaktywne po stronie klienta. W App Routerze Next.js komponenty są domyślnie komponentami serwerowymi; aby użyć komponentu klienckiego, należy dodać 'use client'.

Działanie komponentów serwerowych

Komponenty serwerowe działają wyłącznie na serwerze. Mogą: bezpośrednio pobierać dane, uzyskiwać dostęp do systemu plików, korzystać z sekretów dostępnych tylko na serwerze oraz renderować HTML bez wysyłania Reacta do klienta. Nie mogą: używać hooków, zarządzać stanem ani obsługiwać zdarzeń.

Działanie komponentów klienckich

Komponenty klienckie działają na serwerze podczas SSR (początkowy HTML), a na kliencie zapewniają interaktywność. Mogą używać useState, useEffect, handlerów zdarzeń oraz API przeglądarki.

Domyślnie po stronie serwera

W App Routerze Next.js każdy komponent jest domyślnie komponentem serwerowym. To świetne rozwiązanie — większość aplikacji korzysta wtedy ze statycznego renderowania.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Włączenie obsługi klienta

Dodaj 'use client' na początku pliku, aby oznaczyć jego komponenty oraz importowane przez nie komponenty jako komponenty klienckie.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Łączenie komponentów serwerowych i klienckich

Komponenty serwerowe mogą renderować komponenty klienckie, ale komponenty klienckie nie mogą importować komponentów serwerowych. Treść wyrenderowaną na serwerze należy przekazywać jako children do klienckich komponentów opakowujących.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Dlaczego ten wzorzec ma znaczenie

Mniejsze pakiety JavaScript — do przeglądarki są wysyłane tylko komponenty klienckie. Bezpośredni dostęp do bazy danych i plików — w przypadku danych tylko do odczytu nie jest potrzebna warstwa API. Lepsze SEO i krótszy czas LCP — HTML dociera w pełni wyrenderowany.

Zasady granicy klienta

Po oznaczeniu pliku za pomocą 'use client' wszystkie komponenty znajdujące się w tym pliku oraz wszystkie importowane komponenty potomne stają się komponentami klienckimi. 'use client' wyznacza granicę między serwerem a klientem.

Server Actions

Funkcje oznaczone za pomocą 'use server' działają wyłącznie na serwerze, ale można je wywoływać z komponentów klienckich — podobnie jak RPC. Są często używane do obsługi przesyłania formularzy i mutacji.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Przekazywanie propsów z serwera do klienta

Propsy przekazywane z serwera do klienta muszą być możliwe do serializacji w JSON — nie mogą to być funkcje, klasy ani obiekty Date o niestandardowej strukturze. Przed przekazaniem należy je odpowiednio przekształcić.

Rozpoznawanie poszczególnych typów

Sprawdź importy: useState, useEffect oraz handlery onClick sprawiają, że komponent musi być komponentem klienckim. Komponent wyświetlający wyłącznie dane może pozostać komponentem serwerowym.

Korzyści wydajnościowe

Komponenty serwerowe znacznie zmniejszają rozmiar pakietu JavaScript. Strona zawierająca głównie statyczną treść i kilka interaktywnych elementów wysyła do przeglądarki kod JavaScript tylko dla tych elementów — czasem pakiet jest nawet o 90% mniejszy.

Szybki test

Który hook Reacta NIE jest dozwolony w komponencie serwerowym Next.js?

Podsumowanie: serwer a klient

Komponenty serwerowe: działają wyłącznie na serwerze, obsługują async/await, ale nie mogą używać hooków, stanu ani handlerów; zmniejszają rozmiar pakietów. Komponenty klienckie: włącza się za pomocą 'use client', a ich interaktywność zapewniają useState/useEffect/zdarzenia. Serwer może renderować klienta, ale klient nie może importować serwera (może jednak otrzymać go jako children). Server Actions ('use server') służą do mutacji w stylu RPC.

Często zadawane pytania

Czy lekcja „Komponenty serwerowe i klienckie” jest bezpłatna?

Tak — pełny tekst „Komponenty serwerowe i klienckie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Komponenty serwerowe i klienckie”?

Pozna Pan/Pani React Server Components, dowie się, kiedy dodać dyrektywę 'use client' oraz jak łączyć renderowany na serwerze HTML z interaktywnymi wyspami klienckimi. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Komponenty serwerowe i klienckie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy