Jak działa React SSR od środka
Śledzenie ścieżki renderToString/renderToPipeableStream oraz poznanie sposobu, w jaki klient przejmuje hydratację.
Jak działa React SSR od środka to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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.
Problem rozwiązywany przez SSR
Renderowanie po stronie klienta w React wymaga JavaScriptu. Użytkownicy widzą pustą stronę, dopóki JS się nie załaduje i nie uruchomi. SSR wstępnie renderuje HTML na serwerze, dzięki czemu użytkownicy od razu widzą zawartość, co poprawia postrzeganą wydajność i SEO.
renderToString
Oryginalne API SSR: renderToString(<App />) synchronicznie renderuje drzewo komponentów do ciągu HTML na serwerze.
import { renderToString } from 'react-dom/server';
import App from './App';
// In an Express handler:
app.get('*', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html><body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body></html>
`);
});Hydratacja po stronie klienta
Po otrzymaniu HTML przeglądarka analizuje go i renderuje interfejs. Następnie funkcja hydrateRoot() biblioteki React dołącza nasłuchiwanie zdarzeń i sprawia, że statyczny HTML staje się interaktywny — jest to hydratacja.
// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'), <App />);Co dzieje się podczas hydratacji
React jednocześnie przechodzi przez DOM wyrenderowany na serwerze i wirtualny DOM. Jeśli są zgodne, React dołącza nasłuchiwanie zdarzeń bez modyfikowania DOM. Jeśli się różnią, rejestruje ostrzeżenie o błędzie hydratacji i koryguje DOM.
renderToPipeableStream
API strumieniowania w React 18 wysyła HTML we fragmentach, gdy dane stają się dostępne, dzięki czemu przeglądarka może stopniowo renderować zawartość, podczas gdy serwer nadal ją przetwarza.
import { renderToPipeableStream } from 'react-dom/server';
app.get('*', (req, res) => {
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res); // starts streaming
},
});
});Suspense i strumieniowanie
W przypadku strumieniowania SSR granice Suspense najpierw przesyłają zawartość zastępczą, a następnie zastępują ją zawartością po rozwiązaniu danych — bez blokowania początkowego wysłania HTML.
// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
return (
<Layout>
<Suspense fallback={<Skeleton />}>
<UserProfile /> {/* streams after data loads */}
</Suspense>
</Layout>
);
}Serializacja danych
Dane pobrane na serwerze należy zserializować i osadzić w HTML, aby klient mógł je odczytać podczas hydratacji bez ponownego pobierania.
// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');
// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`
// Client hydration reads:
const data = window.__INITIAL_DATA__;Różnice między środowiskami
Kod serwera działa w Node.js, a nie w przeglądarce. Kod odwołujący się do window, document lub localStorage powoduje awarię na serwerze. Należy go zabezpieczyć za pomocą typeof window !== 'undefined'.
const isBrowser = typeof window !== 'undefined';
function getTheme() {
if (!isBrowser) return 'light'; // server-safe default
return localStorage.getItem('theme') ?? 'light';
}React Server Components a SSR
SSR renderuje komponenty do HTML przy każdym żądaniu. React Server Components (RSC) działają inaczej — ich kod JS nigdy nie jest wysyłany do klienta i mogą być asynchroniczne, ale RSC wymagają bundlera obsługującego protokół RSC (Next.js itd.).
Korzyści wydajnościowe strumieniowania
Strumieniowanie SSR poprawia czas do pierwszego bajtu (TTFB) szkieletu strony i umożliwia selektywną hydratację — przeglądarka może przeprowadzić hydratację interaktywnych wysp, zanim zakończy się strumieniowanie kodu HTML całej strony.
Szybkie sprawdzenie
Co funkcja React hydrateRoot() robi inaczej niż createRoot(), gdy HTML serwera już istnieje?
Podsumowanie
SSR używa renderToPipeableStream, aby wysłać HTML, zanim załaduje się JS. Klient wywołuje hydrateRoot(), aby dołączyć nasłuchiwanie zdarzeń do HTML wygenerowanego na serwerze. Strumieniowanie SSR z Suspense najpierw wysyła szkielet strony, a następnie asynchronicznie uzupełnia zawartość. Dostęp do API przeglądarki należy zabezpieczyć za pomocą typeof window !== 'undefined'.
Ucz się React dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 88
- Lekcje
- 324
Często zadawane pytania
Czy lekcja „Jak działa React SSR od środka” jest bezpłatna?
Tak — pełny tekst „Jak działa React SSR od środka” 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 „Jak działa React SSR od środka”?
Śledzenie ścieżki renderToString/renderToPipeableStream oraz poznanie sposobu, w jaki klient przejmuje hydratację. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Jak działa React SSR od środka”?
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
- Jak działa React SSR od środka
- Błędy hydratacji: przyczyny i rozwiązania
- Selektywna hydratacja i strumieniowanie HTML
- Wzorzec architektury wysp