React Server Components

A 2020-as év mindannyiunk számára egy őrült utazás volt. Az év végi ünnepi szezonra a React csapat nemrég izgalmas kutatásokat jelentett be a React alkalmazások építésének új módjáról a React Server Components segítségével.

Kérem, ne feledje, hogy a React Server Components még fejlesztés alatt áll, és egyelőre nem ajánlott a termeléshez. A funkció teljesen opcionális, és továbbra is megírhatod a komponensedet úgy, ahogy ma is teszed.

Az egyórás előadást és a demót itt nézheted meg, de itt van egy 5 perces útmutató, amely kiemeli és elmagyarázza a fontos részeket.

Amellett, ha kíváncsi vagy arra, hogy a React új komponensei milyen szerepet játszanak a jövőbeli tervezőrendszerekben, akkor ajánlom az olvasást:

A React Server Component egy módja a React komponens írásának, amely a szerveroldalon kerül renderelésre a React alkalmazás teljesítményének javítása céljából.

A React-alkalmazások fejlesztése során az egyik probléma a gyakori nagyszámú hálózati kérés, miközben a felhasználók arra várnak, hogy az általuk kért oldal/adatok elérhetővé váljanak:

Az adatlehívás általános megközelítése ma például az API-k useEffect hook segítségével történő hívása:

useEffect(() => {
axios.get("URL HERE")
.then((response) => {
// set data into state setData(response.data);
})
.catch((error) => {
console.log(error);
});
}, );

Bár ezzel nincs semmi baj, ez az adatlekérdezési megközelítés mindig némi időbe fog kerülni, amíg a felhasználó számára valami értelmes dolog megjelenik.

A másik probléma természetesen a csomagok mérete. Minimalizálás, kódfelosztás, holt kód kiküszöbölése néhány példa a React alkalmazás csomagméretének csökkentésére használt módszerekre. Hogy miért? Mert a nagy csomagméret időbe telik a letöltés. Nem mindenki rendelkezik gyors eszközzel és gyors internettel:

A React Server Components segít megoldani a fenti két problémát és még sok mást is.

Hogyan működnek a React Server Components

Mivel a React Server Components még kísérleti fázisban van, a funkció megvalósításának részletei változhatnak. Ennek ellenére a demó megtekintésével megragadhatsz néhány alapvető koncepciót.

Az első dolog, ami feltűnik, hogy a package.json fájlban több kísérleti verziójú csomag is található:

"react": "0.0.0-experimental-3310209d0",
"react-dom": "0.0.0-experimental-3310209d0",
"react-fetch": "0.0.0-experimental-3310209d0",
"react-fs": "0.0.0-experimental-3310209d0",
"react-pg": "0.0.0-experimental-3310209d0",
"react-server-dom-webpack": "0.0.0-experimental-3310209d0",

A react , react-dom és react-server-dom-webpack egy kísérleti verziót használ, amely lehetővé teszi a React Server Component-et, míg a react-fetch , react-fs és react-pg egy csoport wrapper csomag, amelyet az input/ output rendszerrel való interakcióra használnak (Ezeket React IO Libraries-nek hívják)

A következő pont, hogy ez a demo az Express segítségével működik.js, aminek azért van értelme, mert szükség van egy szerverre a komponensek rendereléséhez. De ez felveti a kérdést is: ez azt jelenti, hogy a Server Components csak JavaScript környezetben működik? Mi a helyzet a Go, a Java és más szerveroldali környezetekkel?

A jövőben talán más környezetek támogatásával is találkozunk, ezért ezt a pontot egyelőre tegyük félre.

Természetesen mindezek az implementációs részletek a jövőben, a kutatás előrehaladtával változhatnak.

A src/ mappán belüli kódra lépve háromféle kiterjesztést láthatunk a komponensfájlokhoz:

• .server.js kiterjesztés jelzi a Server Components
• .client.js kiterjesztés jelzi a React Client Components
• A normál .js kiterjesztés a megosztott komponenseket. Ezek a komponensek a szerveren vagy a kliensen futtathatók, attól függően, hogy ki importálja őket.

Ha az alkalmazást a npm start paranccsal indítjuk el, két feladat fog párhuzamosan futni:

• A Node szerver fut a server/api.server.js szkript segítségével
• A Webpack build az ügyféloldali React csomaghoz, a scripts/build.js szkript segítségével

A szerver szkriptet nézve láthatjuk, hogy a app.server.js importálva van a fájlba:

const ReactApp = require('../src/App.server').default;

és később Node Writable folyamként kerül feldolgozásra:

const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname, '../build/react-client-manifest.json'),
'utf8'
);
const moduleMap = JSON.parse(manifest);
pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

A .server.js kiterjesztés alatti kód, beleértve a függőségeit, nem szerepel a kliens csomagban, ami azt jelenti, hogy nulla hatása van a csomag méretére.

A szerverkomponensek közvetlen hozzáféréssel rendelkeznek a szerveren lévő adatbázishoz vagy fájlrendszerhez, így bármilyen adatot felvehet és elküldhet az ügyfélnek az első rendereléskor. A példát a NoteList.server.js fájlban láthatod:

export default function NoteList({searchText}) {const notes = db.query(
`select * from notes where title ilike  order by id desc`,

).rows;
return notes.length > 0 ? (
<ul className="notes-list">
{notes.map((note) => (
<li key={note.id}>
<SidebarNote note={note} />
</li>
))}
</ul>
) : (
<div className="notes-empty">
{searchText
? `Couldn't find any notes titled "${searchText}".`
: 'No notes created yet!'}{' '}
</div>
);
}

A szerver komponensek nem rendelkezhetnek interaktivitással, ami azt jelenti, hogy nem tudsz useState vagy hallgatót létrehozni a szerveroldalon. Állapotokat kell elhelyezned a kliensoldalon és importálnod kell őket a szerverkomponensekből.

Mi a React szerverkomponens előnye?

• A szerverkomponensek nem szerepelnek a csomagban. Soha nem tölti le őket a böngésző, így nulla hatással vannak a csomag méretére
• A csomag méretét csökkentheti azzal, hogy a statikus, csak renderelő komponenseket a szerveroldalra helyezi, és az interaktív-statisztikus komponenseket a kliensoldalon tartja
• A szerverkomponensek hozzáférhetnek a szerveroldali erőforrásokhoz. Az adatbázisból vagy a fájlrendszerből közvetlenül is lekérhet adatokat, és az API-kból is lekérhet, akárcsak az ügyféloldalon
• A szerverkomponensek GraphQL-lekérdezéseket is olvashatnak

Miben különbözik ez a szerveroldali rendereléstől?

AzSSR, ahogy ma a React alkalmazásokban működik, egyszerűen HTML-ként renderelt komponenseket küld a kliensnek, hogy az alkalmazásod gyors válasznak tűnjön. A felhasználó semmit sem tud csinálni az alkalmazásoddal, amíg a JavaScript le nem töltődik.

A React Server Components más. Ahogy a demóban látható, a szerverkomponensek nem HTML-ként renderelve, hanem speciális formátumban kerülnek az ügyfélbe streamelve. A streamnek egyelőre nincs szabványos protokollja, de nagyon hasonlít a JSON formátumra. Íme a válasz egy darabja:

M1:{"id":"./src/SearchField.client.js","chunks":,"name":""}

Míg az SSR-t csak egyszer használják a kezdeti rendereléshez, a Server Components többször is újra lekérdezhető az adatok (a demó esetében a markdown posztok) újbóli rendereléséhez.

Következtetés

A React Server Components egy új izgalmas funkció, amely megváltoztathatja a fejlesztők React alkalmazásainak megírását. Lehetővé teszi a React alkalmazások számára, hogy csomagokat importáljanak anélkül, hogy befolyásolnák a kliens csomagméretét, létrehozva az alkalmazás statikus reprezentációját, amelyet interaktívvá lehet tenni a klienskomponensek használatával.

A fejlesztők a szerverkomponenseket és a klienskomponenseket is használhatják egyetlen DOM-fa alatt, lehetővé téve a szerverkomponensek újbóli lehívását a klienskomponensek állapotának megsemmisítése nélkül.

De mivel ez a funkció még kísérleti, nehéz meghatározni, hogy valóban hasznos lesz-e a vadonban. Egyrészt ez a funkció jelenleg csak a Node.js szerverkörnyezetben használható.

A React csapat jelenleg arra összpontosít, hogy ezt a funkciót olyan meta-keretrendszerekbe vigye be, mint a Next.js és a Gatbsy, ami azt jelenti, hogy még eltarthat egy ideig (ha egyáltalán), amíg más szerveroldali nyelvek, például a PHP, Python, Go vagy Ruby támogatását látjuk.

Összefoglalva: a kliensoldali React nem fog eltűnni. A szerveroldali React opcionális.

Még megosztottam a gondolataimat a Should you create a design system for React Server Components? témában, ami talán érdekelheti Önt.