Nopeuta verkkosivustosi suorituskykyä React Selective Hydration -tekniikalla. Tämä perusteellinen opas selittää komponenttitason hydratoinnin toiminnan, sen hyödyt käyttökokemukselle ja käytännölliset toteutusstrategiat globaaleille sovelluksille.
Verkkosivuston suorituskyvyn hallinta: Syvä Sukellus React Selective Hydration -tekniikkaan
Nykypäivän digitaalisessa maailmassa nopeus ei ole vain ominaisuus; se on positiivisen käyttökokemuksen perusta. Globaaleille sovelluksille, joissa käyttäjät käyttävät sisältöä monenlaisilla laitteilla ja verkkoyhteyksillä, suorituskyky on ensiarvoisen tärkeää. Hitaasti latautuva sivusto voi johtaa käyttäjien turhautumiseen, korkeampiin poistumisprosentteihin ja menetettyihin tuloihin. Kehittäjät ovat vuosien ajan hyödyntäneet palvelinpuolen renderöintiä (SSR) parantaakseen alkulatausaikoja, mutta siihen liittyi merkittävä kompromissi: ei-interaktiivinen sivu, kunnes koko JavaScript-paketti oli ladattu ja suoritettu. Tässä React 18 esitteli vallankumouksellisen konseptin: Selective Hydration.
Tämä kattava opas tutkii Selective Hydration -tekniikan yksityiskohtia. Matkaamme verkkosivujen renderöinnin perusteista Reactin samanaikaisten ominaisuuksien edistyneisiin mekaniikkoihin. Opit paitsi mitä Selective Hydration on, myös miten se toimii, miksi se on mullistava tekijä Core Web Vitals -mittareille ja miten voit toteuttaa sen omissa projekteissasi rakentaaksesi nopeampia ja joustavampia sovelluksia maailmanlaajuiselle yleisölle.
Renderöinnin kehitys Reactissa: CSR:stä SSR:ään ja pidemmälle
Jotta voimme todella arvostaa Selective Hydration -tekniikan innovaatiota, meidän on ensin ymmärrettävä polku, joka johti meidät tänne. Tapamme renderöidä verkkosivuja on kehittynyt merkittävästi, ja jokainen vaihe pyrkii ratkaisemaan edellisen rajoitukset.
Client-Side Rendering (CSR): SPA:n nousu
Reactin kaltaisilla kirjastoilla rakennettujen Single Page Applications (SPA) -sovellusten alkuaikoina Client-Side Rendering oli standardi. Prosessi on suoraviivainen:
- Palvelin lähettää minimaalisen HTML-tiedoston, usein vain yhden ``-elementin, ja linkkejä suuriin JavaScript-tiedostoihin.
- Selain lataa JavaScriptin.
- React suoritetaan selaimessa, renderöi komponentit ja rakentaa DOM:n, mikä tekee sivusta näkyvän ja interaktiivisen.
Hyvät puolet: CSR mahdollistaa erittäin interaktiiviset, sovellusmaiset kokemukset alkulatauksen jälkeen. Siirtymät sivujen välillä ovat nopeita, koska täydellisiä sivun uudelleenlatauksia ei tarvita.
Huonot puolet: Alkulatausaika voi olla tuskallisen hidas. Käyttäjät näkevät tyhjän valkoisen näytön, kunnes JavaScript on ladattu, jäsennetty ja suoritettu. Tämä johtaa huonoon First Contentful Paint (FCP) -tulokseen ja on haitallista hakukoneoptimoinnille (SEO), koska hakukoneiden indeksoijat näkevät usein tyhjän sivun.Server-Side Rendering (SSR): Nopeus ja SEO apuun
SSR otettiin käyttöön CSR:n ydinongelmien ratkaisemiseksi. SSR:n avulla React-komponentit renderöidään HTML-merkkijonoksi palvelimella. Tämä täysin muodostettu HTML lähetetään sitten selaimeen.
- Selain vastaanottaa ja renderöi HTML:n välittömästi, joten käyttäjä näkee sisällön lähes heti (erinomainen FCP).
- Hakukoneiden indeksoijat voivat indeksoida sisällön tehokkaasti, mikä parantaa SEO:ta.
- Taustalla ladataan sama JavaScript-paketti.
- Kun se on ladattu, React suoritetaan asiakkaalla, liittäen tapahtumakuuntelijat ja tilan olemassa olevaan palvelimella renderöityyn HTML:ään. Tätä prosessia kutsutaan hydratoinniksi.
Perinteisen SSR:n "Outo Laakso"
Vaikka SSR ratkaisi tyhjän näytön ongelman, se toi mukanaan uuden, hienovaraisemman ongelman. Sivu näyttää interaktiiviselta kauan ennen kuin se todella on. Tämä luo "outon laakson", jossa käyttäjä näkee painikkeen, napsauttaa sitä, eikä mitään tapahdu. Tämä johtuu siitä, että kyseisen painikkeen toimintaan tarvittava JavaScript ei ole vielä saanut valmiiksi koko sivun hydratoinnin tehtävää.
Tämän turhautumisen aiheuttaa monoliittinen hydratoituminen. Reactin versioissa ennen versiota 18 hydratoituminen oli kaiken tai ei mitään -juttu. Koko sovellus oli hydratoitava yhdellä kertaa. Jos sinulla oli yksi uskomattoman hidas komponentti (ehkä monimutkainen kaavio tai raskas kolmannen osapuolen widget), se estäisi koko sivun hydratoitumisen. Otsikkosi, sivupalkkisi ja pääsisältösi saattavat olla yksinkertaisia, mutta ne eivät voineet muuttua interaktiivisiksi, ennen kuin hitainkin komponentti oli valmis. Tämä johtaa usein huonoon Time to Interactive (TTI) -tulokseen, joka on kriittinen mittari käyttökokemukselle.
Mikä on Hydratointi? Ydinajatuksen Purkaminen
Tarkennetaan ymmärrystämme hydratoinnista. Kuvittele elokuva lavasteet. Palvelin rakentaa staattiset lavasteet (HTML) ja lähettää ne sinulle. Se näyttää todelliselta, mutta näyttelijät (JavaScript) eivät ole vielä saapuneet. Hydratointi on prosessi, jossa näyttelijät saapuvat lavasteisiin, ottavat paikkansa ja herättävät kohtauksen eloon toiminnalla ja dialogilla (tapahtumakuuntelijat ja tila).
Perinteisessä hydratoinnissa jokaisen näyttelijän, pääosanesittäjästä taustanäyttelijään, piti olla paikallaan, ennen kuin ohjaaja pystyi huutamaan "Action!". Jos yksi näyttelijä oli jumissa liikenteessä, koko tuotanto pysähtyi. Juuri tämän ongelman Selective Hydration ratkaisee.
Esittelyssä Selective Hydration: Mullistava Tekijä
Selective Hydration, oletuskäyttäytyminen React 18:ssa, kun käytetään streaming SSR:ää, irtautuu monoliittisesta mallista. Sen avulla sovelluksesi voi hydratoitua osissa, priorisoiden tärkeimmät osat tai ne, joiden kanssa käyttäjä on vuorovaikutuksessa.
Näin se muuttaa peliä perustavanlaatuisesti:
- Ei-estävä hydratoituminen: Jos komponentti ei ole vielä valmis hydratoitumaan (esimerkiksi sen koodi on ladattava `React.lazy`-funktion kautta), se ei enää estä muun sivun toimintaa. React yksinkertaisesti ohittaa sen ja hydratoi seuraavan käytettävissä olevan komponentin.
- Streaming HTML Suspensen kanssa: Sen sijaan, että odotettaisiin hidasta komponenttia palvelimella, React voi lähettää sen tilalle varasisällön (kuten spinnerin). Kun hidas komponentti on valmis, sen HTML striimataan asiakkaalle ja vaihdetaan saumattomasti sisään.
- Käyttäjän priorisoima hydratoituminen: Tämä on nerokkain osa. Jos käyttäjä on vuorovaikutuksessa komponentin kanssa (esim. napsauttaa painiketta), ennen kuin se on hydratoitu, React priorisoi kyseisen komponentin ja sen vanhempien hydratoitumisen. Se tallentaa tapahtuman ja toistaa sen, kun hydratoituminen on valmis, mikä saa sovelluksen tuntumaan välittömästi reagoivalta.
Palataan kauppaanalogiaan: Selective Hydrationin avulla asiakkaat voivat maksaa ja lähteä heti, kun he ovat valmiita. Vielä parempi, jos kiireinen asiakas on lähellä kassaa, kaupanjohtaja (React) voi priorisoida heidät ja päästää heidät jonon eteen. Tämä käyttäjäkeskeinen lähestymistapa saa kokemuksen tuntumaan niin paljon nopeammalta.
Selective Hydrationin Pylväät: Suspense ja Samanaikainen Renderöinti
Selective Hydration ei ole taikuutta; se on seurausta kahdesta tehokkaasta, toisiinsa liittyvästä ominaisuudesta Reactissa: Server-Side Suspense ja Concurrent Rendering.
React Suspensen ymmärtäminen palvelimella
Saatat olla perehtynyt `
`-komponentin käyttöön asiakkaalla koodin jakamiseen `React.lazy`-funktion avulla. Palvelimella sillä on samanlainen, mutta tehokkaampi rooli. Kun käärid komponentin ` `-reunaan, kerrot Reactille: "Tämä osa käyttöliittymästä ei ehkä ole heti valmis. Älä odota sitä. Lähetä varasisältö nyt ja striimaa todellinen sisältö, kun se on valmis." Harkitse sivua, jolla on tuotetietosivu ja sosiaalisen median kommenttiwidgetti. Kommenttiwidgetti luottaa usein kolmannen osapuolen API:in ja voi olla hidas.
```jsx // Ennen: Palvelin odottaa fetchComments()-funktion ratkaisemista, mikä viivästyttää koko sivua. function ProductPage({ productId }) { const comments = fetchComments(productId); return ( <>); } // Jälkeen: Suspensen avulla palvelin lähettää ProductDetails -komponentin välittömästi. import { Suspense } from 'react'; const Comments = React.lazy(() => import('./Comments.js')); function ProductPage() { return ( <> }> ); } ``` Tämän muutoksen myötä palvelin ei odota `Comments`-komponenttia. Se lähettää HTML:n `ProductDetails`-komponentille ja `Spinner`-varasisällön heti. `Comments`-komponentin koodi ladataan asiakkaalle taustalla. Kun se saapuu, React hydratoi sen ja korvaa spinnerin. Käyttäjä voi nähdä ja olla vuorovaikutuksessa tuotteen pääasiallisen tiedon kanssa paljon aikaisemmin.
Samanaikaisen Renderöinnin Rooli
Concurrent Rendering on taustalla oleva moottori, joka mahdollistaa tämän. Sen avulla React voi keskeyttää, jatkaa tai hylätä renderöintityön estämättä selaimen pääsäiettä. Ajattele sitä hienostuneena tehtävänhallintana käyttöliittymän päivityksille.
Hydratoinnin yhteydessä samanaikaisuus mahdollistaa Reactin:
- Aloita sivun hydratoituminen heti, kun ensimmäinen HTML ja osa JavaScriptistä saapuvat.
- Keskeytä hydratoituminen, jos käyttäjä napsauttaa painiketta.
- Priorisoi käyttäjän vuorovaikutus, hydratointi napsautettu painike ja sen tapahtumakäsittelijän suorittaminen.
- Jatka sivun muun osan hydratoimista taustalla, kun vuorovaikutus on käsitelty.
Tämä keskeytysmekanismi on kriittinen. Se varmistaa, että käyttäjän syöte käsitellään välittömästi, mikä parantaa dramaattisesti mittareita, kuten First Input Delay (FID) ja uudempi, kattavampi Interaction to Next Paint (INP). Sivu ei koskaan tunnu jäätyneeltä, vaikka se latautuisi ja hydratoituisi edelleen taustalla.
Käytännön Toteutus: Selective Hydrationin Tuominen Sovellukseesi
Teoria on hienoa, mutta olkaamme käytännöllisiä. Miten voit ottaa tämän tehokkaan ominaisuuden käyttöön omassa React-sovelluksessasi?
Edellytykset ja Asennus
Varmista ensin, että projektisi on määritetty oikein:
- Päivitä React 18:aan: Sekä `react`- että `react-dom`-pakettien on oltava versio 18.0.0 tai uudempi.
- Käytä `hydrateRoot`-funktiota asiakkaalla: Korvaa vanha `ReactDOM.hydrate`-funktio uudella `hydrateRoot`-API:lla. Tämä uusi API valitsee sovelluksesi samanaikaisiin ominaisuuksiin.
```jsx
// client/index.js
import { hydrateRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
hydrateRoot(container,
); ``` - Käytä Streaming API:a palvelimella: Sinun on käytettävä streaming-renderöijää. Node.js-ympäristöille, kuten Express tai Next.js, tämä on `renderToPipeableStream`. Muilla ympäristöillä on omat vastineensa (esim. `renderToReadableStream` Denolle tai Cloudflare Workersille).
Koodiesimerkki: Vaiheittainen Opas
Rakennetaan yksinkertainen esimerkki Express.js:n avulla osoittaaksemme koko työnkulun.
Sovelluksemme rakenne:
- `App`-komponentti, joka sisältää `
`- ja ` `-sisältöalueen. - `
`-komponentti, joka on heti saatavilla. - Hidas `
`-komponentti, jonka koodin jaamme ja keskeytämme.
Vaihe 1: Palvelin (`server.js`)
Tässä käytämme `renderToPipeableStream`-funktiota lähettääksemme HTML:n palasina.
```jsx // server.js import express from 'express'; import fs from 'fs'; import path from 'path'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './src/App'; const app = express(); app.use('^/$', (req, res, next) => { const { pipe } = ReactDOMServer.renderToPipeableStream(, { bootstrapScripts: ['/main.js'], onShellReady() { res.setHeader('content-type', 'text/html'); pipe(res); } } ); }); app.use(express.static(path.resolve(__dirname, 'build'))); app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` Vaihe 2: Pääsovelluskomponentti (`src/App.js`)
Käytämme `React.lazy`-funktiota tuodaksemme dynaamisesti `CommentsSection`-komponentin ja käärimme sen `
```jsx // src/App.js import React, { Suspense } from 'react'; const CommentsSection = React.lazy(() => import('./CommentsSection')); const Spinner = () =>`-komponenttiin. Ladataan kommentteja...
; function App() { return (); } export default App; ```Mahtava blogikirjoitukseni
Tämä on pääsisältö. Se latautuu välittömästi ja on heti interaktiivinen.
}> Vaihe 3: Hidas Komponentti (`src/CommentsSection.js`)
Simuloidaksemme hidasta komponenttia voimme luoda yksinkertaisen apuohjelman, joka käärii lupauksen viivästyttääkseen sen ratkaisemista. Todellisessa tilanteessa tämä viive voi johtua monimutkaisista laskelmista, suuresta koodipaketista tai tietojen noutamisesta.
```jsx // Apuohjelma verkon viiveen simulointiin function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // src/CommentsSection.js import React from 'react'; // Simuloi hidasta moduulin latausta await delay(3000); function CommentsSection() { return (); } export default CommentsSection; ```Kommentit
- Hieno kirjoitus!
- Erittäin informatiivinen, kiitos.
(Huomautus: Ylätason `await` edellyttää modernia bundler-asetusta, joka on määritetty sitä varten.)
Mitä Tapahtuu Suorituksen Aikana?
- Pyyntö: Käyttäjä pyytää sivua.
- Alkuperäinen Virta: Node.js-palvelin aloittaa renderöinnin. Se renderöi `nav`-osion, `h1`-otsikon, `p`-kappaleen ja `button`-painikkeen. Kun se osuu `CommentsSection`-osion `
`-reunaan, se ei odota. Se lähettää varasisällön HTML:n (` Ladataan kommentteja...
`) ja jatkaa. Ensimmäinen HTML-osa lähetetään selaimeen. - Nopea FCP: Selain renderöi tämän alkuperäisen HTML:n. Käyttäjä näkee välittömästi navigointipalkin ja pääkirjoituksen sisällön. Kommenttiosio näyttää latausviestin.
- Asiakkaan JS-lataukset: `main.js`-paketti alkaa latautua.
- Selective Hydration alkaa: Kun `main.js` saapuu, React aloittaa sivun hydratoimisen. Se liittää tapahtumakuuntelijat `nav`-osioon ja `button`-painikkeeseen. Käyttäjä voi nyt napsauttaa "Napsauta Minua" -painiketta ja nähdä ilmoituksen, vaikka kommentit ovat edelleen "latautumassa".
- Lazy-komponentti Saapuu: Taustalla selain noutaa `CommentsSection.js`-koodin. Simuloimamme 3 sekunnin viive tapahtuu.
- Lopullinen Virta ja Hydratointi: Kun `CommentsSection.js` on ladattu, React hydratoi sen ja korvaa saumattomasti `Spinner`-osion todellisella kommenttilistalla ja syöttökentällä. Tämä tapahtuu keskeyttämättä käyttäjää tai estämättä pääsäiettä.
Tämä rakeinen, priorisoitu prosessi on Selective Hydrationin ydin.
Vaikutuksen Analysointi: Suorituskyvyn Hyödyt ja Käyttökokemuksen Voitot
Selective Hydrationin käyttöönotossa ei ole kyse vain uusimman suuntauksen seuraamisesta; kyse on konkreettisten parannusten toimittamisesta käyttäjillesi.
Parannetut Core Web Vitals -mittarit
- Time to Interactive (TTI): Tämä kokee merkittävimmän parannuksen. Koska sivun osista tulee interaktiivisia niiden hydratoituessa, hitain komponentti ei enää sanele TTI:tä. Näkyvän, korkean prioriteetin sisällön TTI saavutetaan paljon aikaisemmin.
- First Input Delay (FID) / Interaction to Next Paint (INP): Nämä mittarit mittaavat reagoivuutta. Koska samanaikainen renderöinti voi keskeyttää hydratoinnin käyttäjän syötteen käsittelemiseksi, viive käyttäjän toiminnan ja käyttöliittymän vasteen välillä minimoidaan. Sivu tuntuu napakalta ja reagoivalta alusta alkaen.
Parannettu Käyttökokemus
Tekniset mittarit muuttuvat suoraan paremmaksi käyttäjämatkaksi. SSR:n "outon laakson" poistaminen on valtava voitto. Käyttäjät voivat luottaa siihen, että jos he näkevät elementin, he voivat olla vuorovaikutuksessa sen kanssa. Globaalille yleisölle hitaammilla verkoilla tämä on mullistavaa. Heidän ei enää tarvitse odottaa, että usean megatavun JavaScript-paketti on valmis, ennen kuin he voivat käyttää sivustoa. He saavat toimivan, interaktiivisen käyttöliittymän pala palalta, mikä on paljon sulavampi ja tyydyttävämpi kokemus.
Globaali Näkökulma Suorituskykyyn
Yritykselle, joka palvelee maailmanlaajuista asiakaskuntaa, verkkojen nopeuksien ja laitteiden ominaisuuksien monimuotoisuus on suuri haaste. Käyttäjällä, jolla on 5G-yhteys ja huippuluokan älypuhelin Soulissa, on hyvin erilainen kokemus kuin käyttäjällä, jolla on 3G-yhteys ja edullinen laite maaseudulla. Selective Hydration auttaa kuromaan umpeen tätä kuilua. Striimaamalla HTML:ää ja hydratoimalla valikoidusti toimitat arvoa käyttäjälle hitaalla yhteydellä paljon nopeammin. He saavat kriittisen sisällön ja perusinteraktiivisuuden ensin, kun taas raskaammat komponentit latautuvat taustalla. Tämä lähestymistapa luo oikeudenmukaisemman ja helpommin lähestyttävän verkon kaikille, kaikkialla.
Yleiset Sudenkuopat ja Parhaat Käytännöt
Hyödynnä Selective Hydration -tekniikkaa parhaalla mahdollisella tavalla ottamalla huomioon nämä parhaat käytännöt:
Hydratoitumisen Pullonkaulojen Tunnistaminen
Käytä React DevTools Profileria tunnistaaksesi, mitkä komponentit vievät eniten aikaa renderöintiin ja hydratoitumiseen. Etsi komponentteja, jotka ovat laskennallisesti kalliita asiakkaalla, joilla on suuret riippuvuuspuut tai jotka alustavat raskaita kolmannen osapuolen komentosarjoja. Nämä ovat ensisijaisia ehdokkaita käärittäväksi `
`-komponenttiin. `
`-komponentin Strateginen Käyttö Älä kääri jokaista komponenttia `
`-komponenttiin. Tämä voi johtaa hajanaiseen latauskokemukseen. Ole strateginen. Hyviä ehdokkaita keskeytykseen ovat: - Sivun alaosan sisältö: Mikään, mitä käyttäjä ei näe aluksi.
- Ei-kriittiset widgetit: Chatbotit, yksityiskohtaiset analytiikkakaaviot, sosiaalisen median syötteet.
- Käyttäjän vuorovaikutukseen perustuvat komponentit: Sisältö modaalissa tai välilehdessä, joka ei ole oletusarvoisesti näkyvissä.
- Raskaat kolmannen osapuolen kirjastot: Interaktiiviset kartat tai monimutkaiset datan visualisointikomponentit.
Tietojen Noutamisen Huomioiminen
Selective Hydration toimii käsi kädessä Suspense-ominaisuuden tukeman tietojen noutamisen kanssa. Vaikka React ei toimita tiettyä tietojen noutamisratkaisua, kirjastoilla, kuten Relay ja kehyksillä, kuten Next.js, on sisäänrakennettu tuki. Voit myös luoda mukautettuja koukkuja, jotka heittävät lupauksen integroida Suspenseen, jolloin komponenttisi voivat odottaa tietoja palvelimella estämättä alkuperäistä virtaa.
SEO-vaikutukset
Yleinen huolenaihe edistyneiden renderöintitekniikoiden kanssa on SEO. Onneksi Selective Hydration on erinomainen SEO:lle. Koska alkuperäinen HTML renderöidään edelleen palvelimella, hakukoneiden indeksoijat saavat mielekästä sisältöä välittömästi. Modernit indeksoijat, kuten Googlebot, voivat myös käsitellä JavaScriptiä ja näkevät sisällön, joka striimataan myöhemmin. Tuloksena on nopea, indeksoitava sivu, joka on myös erittäin suorituskykyinen käyttäjille – win-win.
Renderöinnin Tulevaisuus Reactissa: Palvelinkomponentit
Selective Hydration on perustavanlaatuinen tekniikka, joka tasoittaa tietä seuraavalle suurelle evoluutiolle Reactissa: React Server Components (RSC).
Palvelinkomponentit ovat uusi komponenttityyppi, joka suoritetaan yksinomaan palvelimella. Niillä ei ole asiakaspuolen JavaScript-jalanjälkeä, mikä tarkoittaa, että ne eivät vaikuta pakettisi kokoon kilotavua. Ne ovat täydellisiä staattisen sisällön näyttämiseen tai tietojen noutamiseen suoraan tietokannasta.
Tulevaisuuden visio on arkkitehtuurien saumaton yhdistelmä:
- Palvelinkomponentit staattiselle sisällölle ja tietojen käyttämiselle.
- Asiakaskomponentit (komponentit, joita käytämme nykyään) interaktiivisuutta varten.
- Selective Hydration siltana, joka herättää sivun interaktiiviset osat eloon estämättä käyttäjää.
Tämä yhdistelmä lupaa tarjota kaikkien maailmojen parhaat puolet: palvelimella renderöidyn sovelluksen suorituskyvyn ja yksinkertaisuuden sekä asiakaspuolen SPA:n rikkaan interaktiivisuuden.
Johtopäätös: Paradigman Muutos Web-kehityksessä
React Selective Hydration on enemmän kuin vain asteittainen suorituskyvyn parannus. Se edustaa perustavanlaatuista paradigman muutosta siinä, miten rakennamme verkkoa varten. Siirtymällä pois monoliittisesta, kaiken tai ei mitään -mallista voimme nyt rakentaa sovelluksia, jotka ovat rakeisempia, joustavampia ja keskittyneempiä käyttäjän todellisiin vuorovaikutuksiin.
Sen avulla voimme priorisoida tärkeät asiat ja tarjota käyttökelpoisen ja ihastuttavan kokemuksen jopa haastavissa verkkoyhteyksissä. Se tunnustaa, että kaikkia verkkosivun osia ei ole luotu tasavertaisiksi, ja antaa kehittäjille työkalut orkestroida latausprosessia tarkasti.
Jokaiselle kehittäjälle, joka työskentelee laajamittaisen, globaalin sovelluksen parissa, päivittäminen React 18:aan ja Selective Hydrationin omaksuminen ei ole enää valinnaista – se on välttämätöntä. Aloita kokeileminen `Suspense`-komponentin ja streaming SSR:n kanssa jo tänään. Käyttäjäsi, riippumatta siitä, missä he ovat maailmassa, kiittävät sinua nopeammasta, sujuvammasta ja reagoivammasta kokemuksesta.