React Academy · Oppitunti

React SSR:n toiminta konepellin alla

Seuratkaa renderToString/renderToPipeableStream-polku ja ymmärtäkää, miten client jatkaa hydratointia.

Oppitunti 1/412 vaihetta

React SSR:n toiminta konepellin alla on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Ongelma, jonka SSR ratkaisee

Asiakaspuolen React tarvitsee JavaScriptiä renderöidäkseen käyttöliittymän. Käyttäjät näkevät tyhjän sivun, kunnes JavaScript latautuu ja suoritetaan. SSR renderöi HTML:n palvelimella etukäteen, joten käyttäjät näkevät sisällön heti, mikä parantaa koettua suorituskykyä ja hakukoneoptimointia.

renderToString

Alkuperäinen SSR-API: renderToString(<App />) renderöi komponenttipuun synkronisesti HTML-merkkijonoksi palvelimella.

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>
  `);
});

Hydraatio asiakaspuolella

Kun HTML saapuu, selain jäsentää sen ja renderöi käyttöliittymän. Sen jälkeen Reactin hydrateRoot() liittää tapahtumankuuntelijat ja tekee staattisesta HTML:stä vuorovaikutteisen — tätä kutsutaan hydraatioksi.

// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

Mitä hydraation aikana tapahtuu

React käy palvelimella renderöidyn DOM:n ja virtuaalisen DOM:n läpi samanaikaisesti. Jos ne vastaavat toisiaan, React liittää kuuntelijat koskematta DOM:iin. Jos ne eroavat toisistaan, se kirjaa hydraatiovaroituksen ja korjaa DOM:n.

renderToPipeableStream

React 18:n streamaus-API lähettää HTML:ää paloina sitä mukaa, kun dataa tulee saataville. Näin selain voi piirtää sisältöä vaiheittain, vaikka palvelin käsittelee pyyntöä edelleen.

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 ja streamaus

Streamaavan SSR:n yhteydessä Suspense-rajat streamaavat ensin varasisällön ja korvaavat sen sisällöllä, kun data on valmis — alkuperäisen HTML:n lähettämistä ei tarvitse estää.

// 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>
  );
}

Datan serialisointi

Palvelimella haettu data on serialisoitava ja upotettava HTML:ään, jotta asiakaspuoli voi lukea sen hydraation aikana hakematta dataa uudelleen.

// 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__;

Ympäristöjen erot

Palvelinkoodi suoritetaan Node.js:ssä, ei selaimessa. window-, document- tai localStorage-viittauksia sisältävä koodi kaatuu palvelimella. Suojatkaa nämä viittaukset ehdolla 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 vs. SSR

SSR renderöi komponentit HTML:ksi jokaisen pyynnön yhteydessä. React Server Components (RSC) poikkeaa tästä — niiden JavaScriptiä ei koskaan lähetetä asiakaspuolelle, ja ne voivat olla asynkronisia, mutta RSC edellyttää RSC-protokollaa tukevaa bundleria (Next.js:ää tai vastaavaa).

Streamauksen suorituskykyhyödyt

Streamaava SSR parantaa sivun kuoren ensimmäiseen tavuun kuluvaa aikaa (Time To First Byte, TTFB) ja mahdollistaa valikoivan hydraation — selain voi hydratoida vuorovaikutteiset saarekkeet ennen kuin koko sivun HTML on streamattu.

Pikatarkistus

Mitä Reactin hydrateRoot() tekee eri tavalla kuin createRoot(), kun palvelimen HTML on jo olemassa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

SSR käyttää renderToPipeableStream-funktiota HTML:n lähettämiseen ennen JavaScriptin latautumista. Asiakaspuoli kutsuu hydrateRoot()-funktiota tapahtumankuuntelijoiden liittämiseen palvelimen HTML:ään. Suspensen kanssa käytettävä streamaava SSR lähettää ensin kuoren ja täydentää sisällön asynkronisesti. Suojatkaa selain-APIen käyttö ehdolla typeof window !== 'undefined'.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React SSR:n toiminta konepellin alla” ilmainen?

Kyllä – oppitunnin ”React SSR:n toiminta konepellin alla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React SSR:n toiminta konepellin alla”?

Seuratkaa renderToString/renderToPipeableStream-polku ja ymmärtäkää, miten client jatkaa hydratointia. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”React SSR:n toiminta konepellin alla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React SSR:n toiminta konepellin alla
Hydratointivirheet: syyt ja korjaukset
Valikoiva hydratointi ja suoratoistettava HTML
Islands-arkkitehtuurimalli

← Takaisin: React Academy