React Server Components

.

L’année 2020 a été une course folle pour nous tous. Pour cette période de fêtes de fin d’année, l’équipe React a récemment annoncé des recherches passionnantes sur une nouvelle façon de construire des applications React avec React Server Components.

Veuillez garder à l’esprit que React Server Components est toujours en cours de développement et n’est pas encore recommandé pour la production. La fonctionnalité est complètement optionnelle et vous pouvez toujours écrire votre composant comme vous le faites aujourd’hui.

Vous pouvez regarder la conférence d’une heure et la démo ici, mais voici un guide de 5 minutes qui souligne et explique les bits importants.

Aussi, si vous êtes curieux de savoir comment les nouveaux composants de React jouent un rôle dans les futurs systèmes de conception, je vous recommande de lire :

React Server Component est une façon d’écrire un composant React qui est rendu côté serveur dans le but d’améliorer les performances des apps React.

L’un des problèmes rencontrés lors du développement d’applications avec React est le nombre élevé commun de requêtes réseau effectuées pendant que les utilisateurs attendent que la page/les données qu’ils ont demandées deviennent disponibles :

Par exemple, l’approche commune de la récupération de données aujourd’hui est d’appeler les API en utilisant le crochet useEffect :

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

Bien qu’il n’y ait rien de mal à cela, cette approche de récupération de données coûtera toujours un certain temps pour rendre quelque chose de significatif pour l’utilisateur.

L’autre problème est, bien sûr, la taille des paquets. La minification, la division du code, l’élimination du code mort sont quelques exemples de méthodes utilisées pour réduire la taille du bundle d’une application React. Pourquoi ? Parce qu’un gros paquet prend du temps à télécharger. Tout le monde n’a pas accès à un appareil rapide et à un Internet rapide :

React Server Components aidera à résoudre les deux problèmes ci-dessus et bien plus encore.

Comment fonctionnent les composants de serveur React

Parce que React Server Components est encore en phase expérimentale, les détails de mise en œuvre de cette fonctionnalité pourraient changer. Même ainsi, vous pouvez saisir certains de ses concepts de base en regardant la démo.

La première chose à remarquer est qu’il y a plusieurs paquets avec une version expérimentale dans le fichier 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",

Les react , react-dom et react-server-dom-webpack utilise une version expérimentale qui active React Server Component, tandis que react-fetch , react-fs et react-pg est un groupe de paquets wrapper utilisés pour interagir avec le système d’entrée / sortie (Ils sont appelés React IO Libraries)

Le point suivant est que cette démo est alimentée par Express.js, ce qui est logique car vous avez besoin d’un serveur pour rendre les composants. Mais cela soulève également une question : cela signifie-t-il que les composants de serveur ne fonctionnent que dans un environnement JavaScript ? Qu’en est-il de Go, Java et d’autres environnements côté serveur ?

Nous pourrions voir le support d’autres environnements à l’avenir, alors mettons ce point de côté pour le moment.

Bien sûr, tous ces détails de mise en œuvre pourraient changer à l’avenir, au fur et à mesure que la recherche progresse.

En passant au code à l’intérieur du dossier src/, vous pouvez voir trois types d’extensions pour les fichiers de composants :

• .server.js extension indique un composant de serveur
• .client.js extension indique des composants de client React
• L’extension régulière .js est pour les composants partagés. Ces composants peuvent être exécutés sur le serveur ou le client, selon la personne qui les importe.

Lorsque vous démarrez l’application avec la commande npm start, deux tâches seront exécutées simultanément :

• Le serveur Node s’exécutant à l’aide du script server/api.server.js
• Le build Webpack pour le bundle React côté client, à l’aide du script scripts/build.js

En regardant le script du serveur, vous pouvez voir que le app.server.js est importé dans le fichier :

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

Et plus tard est traité comme un 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);
}

Le code sous l’extension .server.js y compris ses dépendances n’est pas inclus dans le bundle client, ce qui signifie qu’il a un effet nul sur la taille du bundle.

Les composants du serveur ont un accès direct à la base de données ou au système de fichiers sur le serveur, de sorte que vous pouvez ramasser toutes les données dont vous avez besoin et les envoyer au client lors du premier rendu. Vous pouvez voir l’exemple dans NoteList.server.js file:

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

Les composants serveur ne peuvent pas avoir d’interactivité, ce qui signifie que vous ne pouvez pas useStateou créer des listeners du côté serveur. Vous devez mettre des états dans votre côté client et les importer à partir des composants serveur.

Quel est l’avantage de React Server Component?

• Les composants serveur ne sont pas inclus dans le bundle. Ils ne sont jamais téléchargés par le navigateur, ce qui a un effet nul sur la taille du bundle
• Vous pouvez réduire la taille de votre bundle en déplaçant les composants statiques, à rendu seul, dans le côté serveur et en gardant les composants interactifs-statiques du côté client
• Les composants serveur peuvent accéder aux ressources côté serveur. Vous pouvez récupérer des données de la base de données ou du système de fichiers directement, et vous pouvez également récupérer des API tout comme du côté client
• Les composants du serveur peuvent également lire des requêtes GraphQL

En quoi est-ce différent du Server Side Rendering ?

Le RSS tel qu’il fonctionne aujourd’hui dans les applications React consiste simplement à envoyer des composants rendus en HTML dans le client afin que votre application semble avoir une réponse rapide. L’utilisateur ne peut rien faire avec votre app jusqu’à ce que le JavaScript soit téléchargé.

React Server Components est différent. Comme le montre la démo, les Server Components ne sont pas rendus sous forme de HTML, mais sous forme de format spécial qui est diffusé en continu dans le client. Le flux n’a pas de protocole standard pour le moment, mais il ressemble beaucoup au format JSON. Voici un morceau de la réponse :

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

Alors que SSR n’est utilisé qu’une seule fois pour le rendu initial, Server Components peut être re-frappé plusieurs fois pour rendre à nouveau les données (dans le cas de la démo, les posts markdown).

Conclusion

React Server Components est une nouvelle fonctionnalité passionnante qui peut changer la façon dont les développeurs écrivent leur application React. Elle permet aux applications React d’importer des paquets sans impacter la taille du bundle du client, créant ainsi une représentation statique de l’application qui peut être rendue interactive en utilisant les composants client.

Les développeurs peuvent également utiliser à la fois les composants serveur et les composants client sous un seul arbre DOM, vous permettant de récupérer à nouveau les composants serveur sans détruire l’état des composants client.

Mais comme cette fonctionnalité est encore expérimentale, il est difficile de déterminer comment elle sera vraiment utile dans la nature. Pour l’un, cette fonctionnalité ne peut être utilisée que sous l’environnement serveur Node.js actuellement.

L’équipe React se concentre actuellement sur l’apport de cette fonctionnalité dans les méta-frames comme Next.js et Gatbsy, ce qui signifie qu’il pourrait s’écouler un certain temps (si jamais) avant que nous voyions un support pour d’autres langages côté serveur comme PHP, Python, Go ou Ruby.

Pour récapituler, React côté client ne disparaît pas. React côté serveur est facultatif.

En outre, j’ai partagé mes réflexions sur Devriez-vous créer un système de conception pour les composants React Server ? qui pourrait vous intéresser.