– Non è il rendering lato server.
L’anno 2020 è stato una corsa folle per tutti noi. Per questa festa di fine anno, il React Team ha recentemente annunciato un’entusiasmante ricerca su un nuovo modo di costruire app React con React Server Components.
Si prega di tenere a mente che React Server Components è ancora in fase di sviluppo e non è ancora raccomandato per la produzione. La funzione è completamente opzionale e puoi ancora scrivere il tuo componente come fai oggi.
Puoi guardare il discorso di un’ora e la demo qui, ma qui c’è una guida di 5 minuti che evidenzia e spiega le parti importanti.
Inoltre, se siete curiosi di sapere come i nuovi componenti di React giocano un ruolo nei futuri sistemi di progettazione, vi consiglio di leggere:
React Server Component è un modo per scrivere componenti React che vengono renderizzati sul lato server con lo scopo di migliorare le prestazioni delle app React.
Uno dei problemi affrontati quando si sviluppano applicazioni con React è il comune alto numero di richieste di rete fatte mentre gli utenti aspettano che la pagina/dati che hanno richiesto diventino disponibili:
Per esempio, l’approccio comune al fetching dei dati oggi è chiamare le API usando l’hook useEffect:
useEffect(() => {
axios.get("URL HERE")
.then((response) => {
// set data into state setData(response.data);
})
.catch((error) => {
console.log(error);
});
}, );
Anche se non c’è niente di sbagliato in questo, questo approccio al data fetching costerà sempre un po’ di tempo per rendere qualcosa di significativo per l’utente.
L’altro problema è, ovviamente, la dimensione del bundle. Minificazione, suddivisione del codice, eliminazione del codice morto sono alcuni esempi di metodi utilizzati per ridurre la dimensione del bundle dell’applicazione React. Perché? Perché un bundle di grandi dimensioni richiede tempo per essere scaricato. Non tutti hanno accesso a un dispositivo veloce e a internet veloce:
React Server Components aiuterà a risolvere i due problemi di cui sopra e molto altro.
Come funziona React Server Components
Perché React Server Components è ancora in fase sperimentale, i dettagli di implementazione di questa caratteristica potrebbero cambiare. Anche così, è possibile afferrare alcuni dei suoi concetti fondamentali guardando la demo.
La prima cosa da notare è che ci sono diversi pacchetti con una versione sperimentale nel file 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",
Il react , react-dom e react-server-dom-webpack sta usando una versione sperimentale che abilita React Server Component, mentre react-fetch , react-fs e react-pg è un gruppo di pacchetti wrapper utilizzati per interagire con il sistema di input/output (Sono chiamati React IO Libraries)
Il prossimo punto è che questa demo è alimentata da Express.js, il che ha senso perché è necessario un server per renderizzare i componenti. Ma questo solleva anche la domanda: questo significa che i componenti del server funzionano solo in un ambiente JavaScript? Che dire di Go, Java, e altri ambienti server-side?
Potremmo vedere il supporto per altri ambienti in futuro, quindi mettiamo da parte questo punto per ora.
Ovviamente, tutti questi dettagli di implementazione potrebbero cambiare in futuro, con il progredire della ricerca.
Passando al codice all’interno della cartella src/, si possono vedere tre tipi di estensioni per i file dei componenti:
-
.server.jsestensione indica un Server Components -
.client.jsestensione indica React Client Components - La regolare
.jsestensione è per i componenti condivisi. Questi componenti possono essere eseguiti sul server o sul client, a seconda di chi li importa.
Quando avvii l’applicazione con il comando npm start, due compiti saranno eseguiti contemporaneamente:
- Il server Node in esecuzione utilizzando lo script
server/api.server.js - La build di Webpack per il bundle React lato client, utilizzando lo script
scripts/build.js
Guardando lo script del server, puoi vedere che il app.server.js viene importato nel file:
const ReactApp = require('../src/App.server').default;
E successivamente viene elaborato come Node Writable stream:
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);
}
Il codice sotto l’estensione .server.js comprese le sue dipendenze non è incluso nel bundle del client, il che significa che ha effetto zero sulla dimensione del bundle.
I componenti server hanno accesso diretto al database o al filesystem sul server, quindi puoi prendere qualsiasi dato di cui hai bisogno e inviarlo al client al primo rendering. Puoi vedere l’esempio nel file 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>
);
}
I componenti server non possono avere alcuna interattività, il che significa che non puoi useState o creare ascoltatori sul lato server. Devi mettere lo stato nel tuo lato client e importarlo dai componenti server.
Qual è il vantaggio di React Server Component?
- I componenti server non sono inclusi nel bundle. Non vengono mai scaricati dal browser, avendo zero effetto sulla dimensione del bundle
- Puoi ridurre la dimensione del tuo bundle spostando i componenti statici e di solo rendering sul lato server e mantenendo i componenti interattivi-statali sul lato client
- I componenti server possono accedere alle risorse lato server. Puoi recuperare dati dal database o dal filesystem direttamente, e puoi anche recuperare dalle API proprio come sul lato client
- I componenti server possono anche leggere query GraphQL
Come è diverso dal Server Side Rendering?
SSR come funziona oggi nelle applicazioni React è semplicemente l’invio di componenti renderizzati come HTML nel client in modo che la tua app sembri avere una risposta veloce. L’utente non può fare nulla con la tua app finché il JavaScript non viene scaricato.
React Server Components è diverso. Come mostrato nella demo, i Server Components non sono resi come HTML, ma come formato speciale che viene trasmesso al client. Il flusso non ha un protocollo standard per ora, ma assomiglia molto al formato JSON. Ecco un pezzo della risposta:
M1:{"id":"./src/SearchField.client.js","chunks":,"name":""}
Mentre SSR è usato solo una volta per il rendering iniziale, i Server Components possono essere ri-fetched più volte per ri-renderne i dati (nel caso della demo, i post markdown).
Conclusione
React Server Components è una nuova eccitante caratteristica che potrebbe cambiare il modo in cui gli sviluppatori scrivono le loro applicazioni React. Permette alle applicazioni React di importare pacchetti senza impattare la dimensione del bundle del client, creando una rappresentazione statica dell’applicazione che può essere resa interattiva utilizzando i Client Components.
Gli sviluppatori possono anche utilizzare sia i Server Components che i Client Components sotto un singolo albero DOM, permettendo di recuperare i componenti server senza distruggere lo stato dei componenti client.
Ma poiché questa caratteristica è ancora sperimentale, è difficile determinare come sarà veramente utile in natura. Per esempio, questa caratteristica può essere utilizzata solo sotto l’ambiente server di Node.js attualmente.
Il team di React è attualmente concentrato nel portare questa caratteristica in meta-frameworks come Next.js e Gatbsy, il che significa che potrebbe passare del tempo (se mai) prima di vedere il supporto per altri linguaggi lato server come PHP, Python, Go o Ruby.
Per ricapitolare, React lato client non sta scomparendo. React lato server è opzionale.
Inoltre, ho condiviso i miei pensieri su Should you create a design system for React Server Components? che potrebbe interessarvi.