{"id":70369,"date":"2024-08-28T07:00:00","date_gmt":"2024-08-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70369"},"modified":"2025-05-26T07:40:32","modified_gmt":"2025-05-26T14:40:32","slug":"react-server-components-lavenir-du-dveloppement-react-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/react-server-components-lavenir-du-dveloppement-react-fr\/","title":{"rendered":"React Server Components : L\u2019Avenir du D\u00e9veloppement React"},"content":{"rendered":"\n

React est une force dominante pour la cr\u00e9ation d’applications web au cours des dix derni\u00e8res ann\u00e9es<\/a>.<\/p>\n\n\n

Nous avons tous vu son \u00e9volution, passant de ces composants de classe encombrants \u00e0 l’\u00e9l\u00e9gance des hooks.<\/p>\n\n\n

Mais les composants de serveur React (RSCs) ?<\/p>\n\n\n

Nous ne pensons pas que quelqu’un s’attendait \u00e0 un changement aussi radical dans le fonctionnement de React.<\/p>\n\n\n

Alors, que sont exactement les composants serveur React ? Comment fonctionnent-ils ? Et que font-ils diff\u00e9remment que React ne pouvait pas d\u00e9j\u00e0 faire ?<\/p>\n\n\n

Pour r\u00e9pondre \u00e0 toutes ces questions, nous allons rapidement passer en revue les fondamentaux. Si tu as besoin de te remettre \u00e0 niveau, jette un coup d’\u0153il \u00e0 ce guide pour apprendre React en tant que d\u00e9butant<\/a>.<\/p>\n\n\n

Dans cet article, nous allons t\u2019expliquer pourquoi nous avions besoin des composants serveur React, comment ils fonctionnent, et quelques-uns des principaux avantages des RSCs.<\/p>\n\n\n

Commencez maintenant!<\/p>\n\n\n

Quels Sont Les Composants Serveur React ?<\/h2>\n\n\n
\"Diagramme<\/figure>\n\n\n

Pense \u00e0 React Server Components comme une nouvelle mani\u00e8re de construire des applications React. Au lieu de s’ex\u00e9cuter dans le navigateur comme les composants React typiques, les RSCs s’ex\u00e9cutent directement sur ton serveur.<\/p>\n\n\n

\n

\u00ab Je pense que les RSC sont con\u00e7us pour \u00eatre la “composantisation” du backend, c’est-\u00e0-dire l’\u00e9quivalent backend de ce que SPA React<\/a> a fait pour le frontend. En th\u00e9orie, ils pourraient largement \u00e9liminer le besoin de choses comme REST et GraphQL, conduisant \u00e0 une int\u00e9gration beaucoup plus serr\u00e9e entre le serveur et le client puisqu’un composant pourrait traverser toute la pile. \u00bb \u2014 ExternalBison54 sur Reddit<\/a><\/p>\n\n\n<\/blockquote>\n\n\n

Puisque les RSC s’ex\u00e9cutent directement sur le serveur, ils peuvent acc\u00e9der de mani\u00e8re efficace aux ressources backend telles que les bases de donn\u00e9es et les APIs<\/a> sans une couche suppl\u00e9mentaire de r\u00e9cup\u00e9ration de donn\u00e9es.<\/p>\n\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

API<\/h3>\n

Une Interface de Programmation d\u2019Application (API) est un ensemble de fonctions permettant aux applications d’acc\u00e9der \u00e0 des donn\u00e9es et d’interagir avec des composants externes, servant de messager entre le client et le serveur.<\/p>\n \n Lire la suite <\/a>\n\n<\/div>\n\n\n

Mais pourquoi avions-nous besoin des RSC de toute fa\u00e7on ?<\/strong><\/p>\n\n\n

Pour r\u00e9pondre \u00e0 cette question, revenons un peu en arri\u00e8re.<\/p>\n\n\n

React Traditionnel : Rendu C\u00f4t\u00e9 Client (CSR)<\/h2>\n\n\n

React a toujours \u00e9t\u00e9 une biblioth\u00e8que d’interface utilisateur c\u00f4t\u00e9 client.<\/p>\n\n\n

L’id\u00e9e principale derri\u00e8re React est de diviser ton design entier en unit\u00e9s plus petites et ind\u00e9pendantes que nous appelons composants. Ces composants peuvent g\u00e9rer leurs propres donn\u00e9es priv\u00e9es (\u00e9tat<\/strong>) et se transmettre des donn\u00e9es entre eux (props<\/strong>).<\/p>\n\n\n

Pense \u00e0 ces composants comme \u00e0 des fonctions JavaScript<\/a> qui se t\u00e9l\u00e9chargent et s’ex\u00e9cutent directement dans le navigateur de l’utilisateur. Lorsque quelqu’un visite ton application, son navigateur t\u00e9l\u00e9charge tout le code des composants, et React intervient pour tout rendre :<\/p>\n\n\n

\"Organigramme<\/figure>\n\n\n