TUTO React Server Component de A à Z en 2024

Ғылым және технология

Cours GRATUIT sur les Server Components : mlv.sh/yt-server-component
00:00 - Introduction
01:23 - C'était comment AVANT ?
03:16 - Avec les Server Component
04:20 - Hydratation
07:52 - Comparaison avant / après performance
11:30 - Fonctionnement des Servers Component
14:06 - Avantage Server Component
17:04 - Ajout du client
22:04 - Client VS Server
25:05 - Les Neutral Component
28:05 - Composition Client et Server
33:05 - Suspens API
38:05 - Quel type de composants as-tu besoin ?
40:02 - Faut-il éviter les client components ?
41:05 - Utiliser la composition
42:00 - Outro
▶ VIDÉO
Découvrez les Server Components en React, une innovation majeure pour le développement web. Dans cette vidéo, nous plongeons en profondeur dans le fonctionnement, les avantages et les meilleurs cas d'utilisation des Server Components.
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
Le club du développeur secret codelynx.dev/club
Cours GRATUIT sur useState : codelynx.dev/beginreact/usestate
Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs
Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject #javascripttutorials #javascripttutorialforbeginners

Пікірлер: 117

  • @altahir4789
    @altahir47897 ай бұрын

    C'est la meilleure vidéo sur le sujet que j'ai vue jusqu'à présent. Bravo pour la clarté de tes explications.

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    Un grand merci !

  • @Picklin
    @Picklin11 ай бұрын

    Ton optimisme et tes schémas aux petits oignons font toujours aussi plaisir, merci pour le partage ! :)

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci beaucoup ❤️

  • @rodolpheanger6532
    @rodolpheanger653211 ай бұрын

    Encore une très bonne vidéo avec de bonnes explications sur un sujet pas forcément évident à appréhender, top !

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Génial merci beaucoup

  • @84Mariion
    @84Mariion2 ай бұрын

    J'ai regardé ta vidéo sur les servers actions et ensuite celle ci et j'en suis ravie !! Tu es très pédagogue et tes schémas + exemples de code permettent de clarifier l'ensemble et c'est vraiment top! Surtout pour ce genre de notions entre server/client et les actions, les composants on peut très vite s'y perdre! Bravo et merci👍👍

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    Merci ça fait très plaisir !

  • @celloudiallo7933
    @celloudiallo79332 ай бұрын

    Vidéo très bien illustré , ludique et une approche pédagogique de qualité. 100eme commentaire de satisfaction mérité !

  • @melvynxdev

    @melvynxdev

    12 күн бұрын

    Merci pour le soutien !

  • @diabyalmamyyoussouf739
    @diabyalmamyyoussouf7399 ай бұрын

    Excellente logique d’explication ! Merci

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci beaucoup ça fait plaisir

  • @RickyBERTRAND-zf6op
    @RickyBERTRAND-zf6op11 ай бұрын

    Un grand merci pour le partage 🔥🔥

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci à toi !

  • @winston777ar
    @winston777ar11 ай бұрын

    Vraiment style tes cours, merci !

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci beaucoup !

  • @llaume
    @llaume2 ай бұрын

    Bravo c'était trop bien expliquer merci ✨✨

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    merci

  • @samatarmoussa
    @samatarmoussa11 ай бұрын

    Merci beaucoup. Tu m'a fait gagner beaucoup de temps avec cette video

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Génial c'est avec plaisir ❤️

  • @ibrahimacanada
    @ibrahimacanada18 күн бұрын

    Super vidéo comme d habitude

  • @melvynxdev

    @melvynxdev

    17 күн бұрын

    merci

  • @MoryCAMARACI225
    @MoryCAMARACI225Ай бұрын

    Bien expliqué Merci du fond du coeur

  • @melvynxdev

    @melvynxdev

    Ай бұрын

    merci bcp...

  • @kwandjeen
    @kwandjeen11 ай бұрын

    Super boulot. Bravo !

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci !

  • @Doowi92
    @Doowi9211 ай бұрын

    ce que j'aime bien c'est que tu expliques de façon différente pour chaque chose de façon a bien faire comprendre au lieu d'expliquer une fois avec un exemple alors certes pour ceux qui comprennent rapidement ca peut faire répétitif mais pour ceux qui ont du mal ca permet de bien comprendre chaque chose car expliquer de plusieurs façons/contexte différents.

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Exactement, ça prend plus de temps mais ça permet de rendre l'information la plus accessible possible. Certaines personnes sont plus terre à terre, d'autres ont besoin de métaphore etc...

  • @sergekenne2391
    @sergekenne239118 күн бұрын

    grand merci Melvynx pour ce tuto

  • @melvynxdev

    @melvynxdev

    17 күн бұрын

    top

  • @etiennemc2613
    @etiennemc261311 ай бұрын

    Superbe vidéo, merci !

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Génial merci beaucoup !

  • @vincentmarconnet6061
    @vincentmarconnet606111 ай бұрын

    Je commente parce que c’est le meilleur moyen pour dire a KZread et à toi que j’aime ce genre de vidéo 🥲 Encore une pépite ce genre de vidéo !

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci beaucoup ❤️❤️❤️

  • @NyleorV
    @NyleorV8 ай бұрын

    Vidéo de qualité !

  • @melvynxdev

    @melvynxdev

    8 ай бұрын

    Merci !

  • @erwansoulas5359
    @erwansoulas535911 ай бұрын

    Super boulot encore une fois et super intéressant

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci beaucoup ❤️❤️

  • @thechrisas
    @thechrisas4 ай бұрын

    masterclass, tu expliques super bien

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    merci beaucoup !

  • @steellgold
    @steellgold11 ай бұрын

    Enfin.. je l'attendais cette vidéo

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Ah oui je te l'avais dis ❤️

  • @simia4862
    @simia48626 ай бұрын

    Merci ça m'a ouvert une toute nouvelle vision de comment coder mes applications web.

  • @melvynxdev

    @melvynxdev

    6 ай бұрын

    Comme moi !

  • @aminetakdjout6545
    @aminetakdjout654511 ай бұрын

    Merci beaucoup c'est bien expliqué

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    merci beaucoup

  • @HenrySommeil
    @HenrySommeil11 ай бұрын

    Merci pour ton travail

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci beaucoup ❤️

  • @perringrandne6686
    @perringrandne668611 ай бұрын

    Top! Merci

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    merci à toi

  • @g-cordonnier
    @g-cordonnier2 ай бұрын

    Très bien expliqué merci beau travail.

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    merci !

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    Merci à vous 😊

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    Merci à vous 😊

  • @jonathanmerlin4415
    @jonathanmerlin44153 ай бұрын

    Mille merci

  • @melvynxdev

    @melvynxdev

    12 күн бұрын

    Un plaisir pour moi !

  • @Tom-rk3lo
    @Tom-rk3lo9 ай бұрын

    Super merci :D

  • @melvynxdev

    @melvynxdev

    9 ай бұрын

    merci !!

  • @0x_conspi
    @0x_conspi2 ай бұрын

    Masterclass!!!!

  • @melvynxdev

    @melvynxdev

    2 ай бұрын

    Merci

  • @theofernandez611
    @theofernandez6113 ай бұрын

    Tellement bien merci

  • @melvynxdev

    @melvynxdev

    3 ай бұрын

    avec pplaisir !

  • @slempens
    @slempens11 ай бұрын

    Merci Melvynx!

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci à toi !

  • @kaydah7915
    @kaydah791511 ай бұрын

    Merci.

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci à toi !

  • @francktiomela3002
    @francktiomela30025 ай бұрын

    Merci pour ton contenu

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    Avec plaisir

  • @sanda1365
    @sanda13657 ай бұрын

    Ta video est très utile et très clair. Comment ne pas devenir un expert de next js avec tes explications et la docs du framework. Merci pour ta video elle m'a aidé de fouuuuuu !

  • @melvynxdev

    @melvynxdev

    6 ай бұрын

    Merci beaucoup ahaha

  • @amadousow6598
    @amadousow659811 ай бұрын

    merci

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Merci !

  • @birladotech9706
    @birladotech97067 ай бұрын

    Parfait cet video rien a dire

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    merci !

  • @hedigamingfortnite6626
    @hedigamingfortnite66264 ай бұрын

    TOP !!

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    merci !

  • @blaiseabbodjoulde8341
    @blaiseabbodjoulde834110 ай бұрын

    Merci pour la vidéo très édifiantes. Perso, j'aime également beaucoup next Js. Mais si je ne me trompe pas, Remix également supporte les server components

  • @melvynxdev

    @melvynxdev

    10 ай бұрын

    je crois que tu trompes

  • @balthmhs2512
    @balthmhs25125 ай бұрын

    De la bomba ! Je me lance sur React et j'attaque avec Nextjs. Franchement, moi qui aie commencé il y a 10 ans sur PHP, en passant par de l'Ajax pour dynamiser tout ça... Nextjs c'est juste le top ! Tout a été pensé pour faire des applications flexibles aux petits oignons. Grave à tes vidéos et quelques shoots de ChatGPT, j'ai l'impression d'être attaché à une fusée. Cool, continue comme ça, tu nous fais du bien. Parceque là Doc Nextjs c'est pas évident de faire le tri entre toutes les versions majeures. En plus, j'ai bien l'impression que tout n'est pas à jour. Bref, je me suis mis à Nextjs en 2024 😅

  • @melvynxdev

    @melvynxdev

    4 ай бұрын

    On est tellement d'accord !

  • @parlierthierry8880
    @parlierthierry888011 ай бұрын

    Allez, la petite pose video avec mon Reacteur préféré.

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    love !

  • @Jarod75
    @Jarod7511 ай бұрын

    Merci pour ta vidéo et pour les croquis. Je suis plus convaincu par la sécurité que par le gain vitesse. 😮

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Ahaha pourqoui ça ?

  • @Jarod75

    @Jarod75

    11 ай бұрын

    @@melvynxdev parce que en terme de vitesse, le gain est quand même minime.

  • @MrRaelity
    @MrRaelity11 ай бұрын

    Merci, je te découvre que très récemment. Après quelques vidéos (très intéressantes), celle-ci vient me convaincre de m'abonner, de liker et de commenter. Merci pour ce partage très complet, très beau travail ! J'espère que tu continueras ainsi... A ce propos, envisages-tu de faire un cours de A à Z sur l'entièreté de NextJS 13 (avec typescript) ? J'ai pas mal expérimenté jusqu'à Next 12 mais la version 13 change pas mal de trucs fondamentaux et c'est pas forcément facile de s'y retrouver, même avec la doc, notamment avec la revalidation qui a l'air capricieuse et qui ne fait que du SWR (disparition de l'option fallback='blocking') J'ai un exemple de pages statiques contenant des données issues d'une api externe, ces données ne changent que peu souvent, j'aimerai donc renouveler ces pages que toutes les 24h, or, quand la page est redemandée à partir des 24h, la revalidation se fait mais c'est quand même l'ancienne page qui est rendue à ce moment et il faut refresh pour avoir la nouvelle. Ces page doivent se rendre selon l'ISR car je veux pas fetch l'api externe à chaque demande de la page alors que les données n'ont probablement jamais changées (gaspillage). J'ai contourné ce problème à l'aide de middleware appelant une route provoquant cette revalidation comme je souhaite à travers un NextApiResponse.revalidate(ma page) dans un dossier pages/api/revalidation (old school) car ce revalidate fonctionne bien contrairement aux revalidatePath ou revalidateTag bien que cité dans la doc de Next13 app router. Si t'as lu mon commentaire jusqu'au bout merci, et si t'as une réponse à mon souci je suis preneur, ou mieux, une vidéo sur la revalidation en détail. :)

  • @melvynxdev

    @melvynxdev

    10 ай бұрын

    Génial merci beaucoup, je pense continuer comme ça oui !

  • @anthonyferreira1839
    @anthonyferreira18399 ай бұрын

    Tu es très pedagogue, tu ferais un très bon professeur !

  • @melvynxdev

    @melvynxdev

    8 ай бұрын

    Merci beaucoup !

  • @Oumar_kone
    @Oumar_kone11 ай бұрын

    Serveur components c'est génial mais très très très très très très très frustrant des le début difficile a comprendre mais une fois comprise tu pleures de joie tu pleures de joie sincèrement

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Génial oui totalement

  • @simonlecordier5180
    @simonlecordier518011 ай бұрын

    Très bonne vidéo on comprend bien quand utiliser l'un ou l'autre des composants. Je me demande si tu devrais pas mettre un lien pour récupérer les schémas ? J'en aurais bien eu besoin peut-être lors de ma prise de note même si je m'en suit passé.

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Ah oui, ce serait une bonne idée

  • @ludovichund9222
    @ludovichund922211 ай бұрын

    Merci beaucoup pour ces explications précieuses ! J'ai une question, comment tu utilises react query ducoup avec ces composants ? Tu l'utilises pas ? ou que dans les client component ? (ducoup on refait les requêtes côté client :/)

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Tu peux utiliser en client component oui

  • @louismazel
    @louismazel8 ай бұрын

    "LES REACT SERVER COMPONENTS" avec l'accent Texan c'était parfait

  • @melvynxdev

    @melvynxdev

    7 ай бұрын

    totalement

  • @Willow_PX
    @Willow_PX7 ай бұрын

    Mec je suis en train de faire un petit projet en Next pour continuer mon apprentissage du code en général et surtout pour tester Next et je me suis retrouver bloqué entre des action possible server side et d'autre client side. j'ai regardé ta vidéo au pif du pif et là tu balances qu'on peut wrapper des server components dans des client components. Mec... 2 semaines que je cherche et toi tu résous le truc en 5s. Jpp comment je suis nul xDD

  • @melvynxdev

    @melvynxdev

    6 ай бұрын

    Non t'es pas nul tkt c'est pas si simple !

  • @Willow_PX

    @Willow_PX

    6 ай бұрын

    @@melvynxdev C'est gentil mec merci

  • @kevinb.4425
    @kevinb.442510 күн бұрын

    Depuis 2 jours je me tabasse le crane sur une pu*** de question, pourquoi est ce qu'il est recommandé d'utiliser de manière générale les server component sachant que toutes les libs extérieurs (i18n, globals store etc...) utilisent des providers qui sont des client component et donc transforment par essence tous les enfant (donc toute l'app) en client component. Hyper dur de trouver que les children ne sont pas transformer de la même manière qu'un component normal et merci de le dire explicitement ici ! Géniale la vidéo

  • @melvynxdev

    @melvynxdev

    9 күн бұрын

    merci bcp

  • @bossgd100
    @bossgd10011 ай бұрын

    Merci j'avais la flemme de me tapper la doc

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    y'a pas de doc encore :troll: mise à part vercel xD

  • @wyllen44
    @wyllen4410 ай бұрын

    Petite question. Comment gères tu les questions d’invalidation de data avec les server components? Par exemple j’ai une liste de donnés et je peux interagir avec chaque élément de la liste(modification, suppression). Actuellement avec React query on va pouvoir invalider les données récupérées et forcer un « refetch » pour avoir un state bien à jour par rapport au serveur. Dans le cas des serveurs components comment procéder ?

  • @melvynxdev

    @melvynxdev

    10 ай бұрын

    Hello, tu peux revalider le path entier avec un refresh ou un revalidate path dans le contexte de server action ;)

  • @jc13OM
    @jc13OM11 ай бұрын

    Ce que je trouve dommage pour l'instant, c'est de ne pas pouvoir passer une fonction en tant que prop à un client comp depuis un server comp parent pour handle un event dans le child (qui est donc un client comp) Erreur : "Event handlers cannot be passed to Client Component props". Cela oblige a remonter encore le use client au parent, alors que le but initial est de "descendre" le plus possible le use client. Sinon super vidéo, très bon résumé c'est très clair.

  • @melvynxdev

    @melvynxdev

    10 ай бұрын

    Hello, merci beaucoup. Avec les server action, c'est maintenant possible. Sinon c'est assez logique que tu ne puisses pas passer une function qui fait une action du client dans un code server

  • @dfiad77pro
    @dfiad77pro11 ай бұрын

    Très bonnes explications ! A rajouté peut etre un que coté Perf ça se démarque encore plus sur le mobile, coté entreprise industrielles c'est pas gagné, lorsqu'une page télécharge 20 mo de js au 1er chargement et que personne s'en plein et qu'on te parle de green IT :). Actuellement il est difficile de promouvoir ce type de rendu lorsque la stack force à utiliser un tomcat + Java pour le front (ce qui rends la partie hydratation non disponible et que dans le meilleur des cas on fait un bon code splitting) une considération à la masse, pour les server components limite on devrai avoir une autre extension de fichier ( le use client n'est pas un marqueur assez fort), mais ça ce n'est pas nous qui le déciderons :)

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Exactement, certaines personnes utilisent déjà `file.client.tsx` pour comprendre la différence d'un coût d'œil ! Et effectivement, déjà que uniquement Vercel le supportes il y a le temps avec que l'industrie ce mette à jour.

  • @QuentinTRUFFY-gq4ye
    @QuentinTRUFFY-gq4ye11 ай бұрын

    Un grand merci pour cette vidéo incroyable ! J'ai cependant une question. Si je souhaite créer un user context contenant des informations sur l'utilisateur (afin d'éviter de récupérer des informations dans ma base de données à chaque changement de page), et que je place ce contexte dans mon fichier "layout.tsx" à la racine du projet, l'application deviendra-t-elle complètement basée sur des composants côté client ? Car lorsque je fais cela, la page affiche mon composant vide sans les informations, puis le composant se met à jour avec mes données. Pourtant, le contexte est toujours actif. Même en utilisant le streaming, j'ai le même problème.

  • @melvynxdev

    @melvynxdev

    10 ай бұрын

    Hello Quentin, merci pour ton commentaire et désolé pour le temps de réponse ! Hésites pas à rejoindre mon discord codelynx.dev/discord pour poser des questions c'est beaucoup plus simple !

  • @Trinita1970
    @Trinita197011 ай бұрын

    Je suis rassurée par la conclusion car j'ai beaucoup plus de clients components que de serveurs components. En tout cas j'espère que Next.js ne finira pas comme CRA car c'est vraiment un bon framework.

  • @melvynxdev

    @melvynxdev

    11 ай бұрын

    Pourquoi ça finirait comme CRA ?

  • @Trinita1970

    @Trinita1970

    11 ай бұрын

    @@melvynxdev Javascript évolue tellement vite que les technologies deviennent obsolètes au bout de quelques années, voir carrément abandonné comme CRA. PHP c'est plus stable, par exemple.

Келесі