React Server Components

.

Anul 2020 a fost o călătorie nebună pentru noi toți. Pentru acest sezon de sărbători de sfârșit de an, echipa React a anunțat recent cercetări interesante privind o nouă modalitate de a construi aplicații React cu React Server Components.

Vă rugăm să rețineți că React Server Components este încă în curs de dezvoltare și nu este recomandat încă pentru producție. Caracteristica este complet opțională și puteți în continuare să vă scrieți componenta așa cum o faceți astăzi.

Puteți urmări discuția de o oră și demonstrația aici, dar iată un ghid de 5 minute care evidențiază și explică părțile importante.

De asemenea, dacă sunteți curioși despre modul în care noile componente React joacă un rol în viitoarele sisteme de proiectare, vă recomand să citiți:

React Server Component este o modalitate de a scrie componenta React care este redată în partea serverului cu scopul de a îmbunătăți performanța aplicației React.

Una dintre problemele cu care ne confruntăm atunci când dezvoltăm aplicații cu React este numărul frecvent ridicat de cereri de rețea efectuate în timp ce utilizatorii așteaptă ca pagina/datele pe care le-au solicitat să devină disponibile:

De exemplu, abordarea obișnuită pentru căutarea de date în prezent este de a apela API-urile folosind cârligul useEffect:

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

Deși nu este nimic în neregulă cu asta, această abordare de preluare a datelor va costa întotdeauna ceva timp pentru a reda ceva semnificativ pentru utilizator.

O altă problemă este, bineînțeles, dimensiunea pachetului. Minificarea, divizarea codului, eliminarea codului mort sunt câteva exemple de metode utilizate pentru a reduce dimensiunea pachetului unei aplicații React. De ce? Pentru că o dimensiune mare a pachetului necesită timp pentru a fi descărcat. Nu toată lumea are acces la un dispozitiv rapid și la un internet rapid:

React Server Components vă va ajuta să rezolvați cele două probleme de mai sus și multe altele.

Cum funcționează React Server Components

Pentru că React Server Components se află încă în fază experimentală, este posibil ca detaliile de implementare a acestei caracteristici să se schimbe. Chiar și așa, puteți prelua unele dintre conceptele sale de bază uitându-vă la demo.

Primul lucru care trebuie observat este că există mai multe pachete cu o versiune experimentală în fișierul package.json:

"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",

Cele react , react-dom și react-server-dom-webpack folosesc o versiune experimentală care permite React Server Component, în timp ce react-fetch , react-fs și react-pg este un grup de pachete wrapper folosite pentru interacțiunea cu sistemul de intrare/ieșire (Se numesc React IO Libraries)

Următorul punct este că acest demo este alimentat de Express.js, ceea ce are sens pentru că aveți nevoie de un server pentru a reda componentele. Dar acest lucru ridică, de asemenea, întrebarea: asta înseamnă că Server Components funcționează doar într-un mediu JavaScript? Cum rămâne cu Go, Java și alte medii server-side?

Este posibil să vedem suport pentru alte medii în viitor, așa că să lăsăm deoparte acest punct deocamdată.

Desigur, toate aceste detalii de implementare s-ar putea schimba în viitor, pe măsură ce cercetarea avansează.

Mutarea la codul din interiorul folderului src/, puteți vedea trei tipuri de extensii pentru fișierele de componente:

• .server.js extensia indică o componentă de server
• .client.js extensia indică React Client Components
• Extensiunea obișnuită .js este pentru componentele partajate. Aceste componente pot fi rulate pe server sau pe client, în funcție de cine le importă.

Când porniți aplicația cu comanda npm start, două sarcini vor fi executate concomitent:

• Serverul Node care rulează folosind scriptul server/api.server.js
• Compilarea Webpack pentru pachetul React pe partea de client, folosind scriptul scripts/build.js

Urmărind scriptul serverului, puteți vedea că app.server.js este importat în fișier:

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

Și mai târziu este procesat ca flux Node Writable:

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

Codul de sub extensia .server.js, inclusiv dependențele sale, nu este inclus în pachetul client, ceea ce înseamnă că are un efect zero asupra dimensiunii pachetului.

Componentele serverului au acces direct la baza de date sau la sistemul de fișiere de pe server, astfel încât puteți prelua orice date de care aveți nevoie și le puteți trimite către client la prima redare. Puteți vedea exemplul în fișierul NoteList.server.js:

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

Componentele serverului nu pot avea nicio interactivitate, ceea ce înseamnă că nu puteți useState sau crea ascultători pe partea serverului. Trebuie să puneți state în partea de client și să le importați din Server Components.

Care este avantajul React Server Component?

• Componentele server nu sunt incluse în pachet. Ele nu sunt niciodată descărcate de către browser, având un efect zero asupra dimensiunii pachetului
• Puteți reduce dimensiunea pachetului prin mutarea componentelor statice, de redare numai în partea de server și păstrarea componentelor interactive-statice în partea de client
• Componentele server pot accesa resursele din partea serverului. Puteți prelua date din baza de date sau din sistemul de fișiere în mod direct și, de asemenea, puteți prelua date din API-uri, la fel ca pe partea de client
• Componentele de server pot, de asemenea, să citească interogări GraphQL

Cum diferă asta de Server Side Rendering?

SSR, așa cum funcționează astăzi în aplicațiile React, constă pur și simplu în trimiterea componentelor randate ca HTML în client, astfel încât aplicația dvs. să pară că are un răspuns rapid. Utilizatorul nu poate face nimic cu aplicația dvs. până când JavaScript-ul nu este descărcat.

React Server Components este diferit. După cum se arată în demonstrație, Componentele Server nu sunt redate ca HTML, ci ca un format special care este transmis în client. Fluxul nu are deocamdată un protocol standard, dar seamănă foarte mult cu formatul JSON. Iată o bucată din răspuns:

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

În timp ce SSR este folosit o singură dată pentru redarea inițială, Server Components poate fi rechemat de mai multe ori pentru a reda din nou datele (în cazul demo-ului, postările markdown).

Concluzie

React Server Components este o nouă caracteristică interesantă care poate schimba modul în care dezvoltatorii își scriu aplicația React. Aceasta permite aplicațiilor React să importe pachete fără a afecta dimensiunea pachetului clientului, creând o reprezentare statică a aplicației care poate fi făcută interactivă prin utilizarea Client Components.

Dezvoltatorii pot, de asemenea, să utilizeze atât Server Components, cât și Client Components sub un singur arbore DOM, permițându-vă să rechemați componentele serverului fără a distruge starea componentelor clientului.

Dar, deoarece această caracteristică este încă experimentală, este greu de determinat modul în care va fi cu adevărat utilă în natură. În primul rând, această caracteristică poate fi utilizată doar în mediul server Node.js în prezent.

Echipa React se concentrează în prezent pe aducerea acestei caracteristici în meta-frameworks precum Next.js și Gatbsy, ceea ce înseamnă că ar putea trece ceva timp (dacă va trece vreodată) până când vom vedea suport pentru alte limbaje de server, cum ar fi PHP, Python, Go sau Ruby.

Pentru a recapitula, Client-side React nu va dispărea. React pe server este opțional.

De asemenea, am împărtășit gândurile mele despre Ar trebui să creați un sistem de proiectare pentru React Server Components? care s-ar putea să vă intereseze.

.