Komponenty serwerowe a klienckie w Next.js
Określanie, kiedy dodać 'use client', oraz jak komponować drzewa serwerowe i klienckie.
Komponenty serwerowe a klienckie w Next.js to bezpłatna lekcja React 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Domyślnie: komponenty serwerowe
W App Routerze wszystkie komponenty są domyślnie komponentami serwerowymi. Są renderowane na serwerze, nie zawierają JavaScriptu po stronie klienta i mogą bezpośrednio uzyskiwać dostęp do baz danych, zmiennych środowiskowych oraz systemu plików.
Włączanie komponentów klienckich
Dodaj 'use client' na początku pliku, aby przekształcić go w komponent kliencki. Wszystkie jego importy również stają się częścią kodu po stronie klienta — w ten sposób powstaje granica klienta.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Co mogą robić komponenty serwerowe
Komponenty serwerowe mogą wstawiać operacje pobierania danych z użyciem await, odczytywać zmienne środowiskowe, uzyskiwać dostęp do systemu plików oraz importować duże pakiety przeznaczone wyłącznie dla serwera bez zwiększania paczki klienta.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}Czego nie mogą robić komponenty serwerowe
Komponenty serwerowe nie mogą używać hooków (useState, useEffect), interfejsów API przeglądarki ani handlerów zdarzeń. Wymagają one 'use client'.
Łączenie komponentów serwerowych i klienckich
Wynik komponentu serwerowego należy przekazywać do komponentów klienckich jako props lub children. Najlepszy wzorzec to pobieranie danych w komponentach serwerowych i obsługa interakcji w komponentach klienckich.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Przekazywanie elementów podrzędnych z serwera do klienta
Komponent serwerowy może przekazać JSX jako children do komponentu klienckiego. Elementy podrzędne pozostają renderowane na serwerze, a kliencki wrapper dodaje interaktywność.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}Granica klienta
Dodanie 'use client' sprawia, że plik oraz wszystkie importowane przez niego elementy podrzędne działają po stronie klienta. Aby zachować komponent podrzędny jako komponent serwerowy, należy przekazać go jako prop lub slot zamiast importować go bezpośrednio.
Wzorce pobierania danych
Dane należy pobierać w komponentach serwerowych i przekazywać je dalej. W miarę możliwości należy unikać pobierania danych w komponentach klienckich — zwiększa to rozmiar paczki klienta i powiela logikę serwera.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Narzędzia wyłącznie serwerowe
Pakiet server-only zgłasza błąd kompilacji, jeśli moduł przeznaczony wyłącznie dla serwera zostanie przypadkowo zaimportowany do komponentu klienckiego.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Współdzielenie stanu między serwerem a klientem
Komponenty serwerowe nie mogą przechowywać stanu. Aby udostępnić stan uzyskany podczas pobierania danych komponentom klienckim obsługującym interakcje, należy przekazać go jako props podczas pierwszego renderowania, a następnie zarządzać aktualizacjami po stronie klienta.
Kiedy dodać use client
Dodaj 'use client', gdy potrzebujesz: hooków (useState, useEffect), zdarzeń przeglądarki (onClick), interfejsów API przeglądarki (localStorage, window) lub bibliotek innych firm działających po stronie klienta.
Szybkie sprawdzenie
Co należy dodać na początku pliku, aby używać useState lub onClick w App Routerze Next.js?
Podsumowanie
Wszystkie komponenty App Routera są domyślnie komponentami serwerowymi — paczka nie zawiera JavaScriptu, a dane są dostępne bezpośrednio. Dodawaj 'use client' tylko tam, gdzie potrzebna jest interaktywność. Łącz komponenty, przekazując dane pobrane na serwerze jako props lub elementy podrzędne do klienckich wrapperów, i utrzymuj granicę klienta możliwie najniżej w drzewie komponentów.
Często zadawane pytania
Czy lekcja „Komponenty serwerowe a klienckie w Next.js” jest bezpłatna?
Tak — pełny tekst „Komponenty serwerowe a klienckie w Next.js” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Komponenty serwerowe a klienckie w Next.js”?
Określanie, kiedy dodać 'use client', oraz jak komponować drzewa serwerowe i klienckie. Ćwiczysz React 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ąć React Academy?
Nie wymagamy żadnego doświadczenia. React 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 a klienckie w Next.js”?
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 React Academy?
Tak. Każda lekcja React 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
- Konwencje plików App Router
- Komponenty serwerowe a klienckie w Next.js
- Dynamiczne trasy i grupy tras
- Metadata API i SEO w App Router