React : Composants Serveur vs SSR

Quelle est la différence, dans React, entre le rendu côté serveur (le “SSR”) et les composants serveur ?
Pendant un certain temps, j’arrivais pas à bien identifier la différence entre les deux. La question arrêtait pas de me trotter en tête.
À première vue, les deux semblent très similaires. Ils se déroulent tous deux sur le serveur. Ils sont tous deux destinés à accélérer le rendu du contenu.
Mais la documentation relative aux composants serveur explique que ces technologies servent des objectifs différents et opèrent à des niveaux différents. Les deux concepts sont indépendants. Vous pouvez avoir un rendu côté serveur (ou SSR) sans composants serveur et des composants serveur sans SSR. (Et, bien sûr, vous pouvez avoir les deux ou aucun des deux).
Alors, comment comprendre la différence entre les deux ?
Le jour où j'ai compris la différence entre les deux, c'est lorsque je me suis concentré sur ce qui est différent dans les deux noms, et non sur ce qui est similaire. Cela peut sembler évident au point d’être débile, mais croyez-moi, c'est logique. Laissez-moi vous expliquer.
----------
Mon site : kodaps.dev/fr
Sur medium : / gosev

[@iliasaddabenyoucef3656]

Merci vous êtes dans le futur

[@kingelectonics437]

Je viens de découvrir Next js et c'est le futur du dev full stack, comme je l'avais prédit pour Kotlin/jetpack compose pour le développement Android.

[@atchakpaaahmed5444]

Grand merci pour cette belle et magnifique explication sans oublier a quel point tu viens de me faire gagner du temps sur la compréhension des deux concepts. Pour moi une démonstration sur un projet todo serait la bienvenue😊

[@poumpim3974]

Merci pour la vidéo

[@kodaps_fr]

Avec plaisir :)

[@CodingBill]

Okay je comprends un peu mieux, merci pour cette vidéo. Un mystère demeure pour moi et j'aurais aimé voir un exemple concret car j'ai déjà eu un bug assez chelou en mettant en oeuvre ce que tu présentes ici. Admettons que dans ton exemple de page, dans le header, la photo de profil puisse être mise à jour par l'utilisateur sur une page profil spécifique. La difficulté que j'ai rencontré c'est quand l'utilisateur vient changer sa photo de profil, sur certaines pages, la photo va revenir sur l'ancienne. Je pense à une mauvaise invalidation du cache client, en tout cas je n'ai pas trouvé sur le moment de moyen de forcer le refresh de ce composant sur les pages en question. De plus, ce composant était partagé à travers un fichier layout.tsx donc il devrait être efficacement "partagé" entre toutes les pages de l'appli. Après des jours de galères j'ai laissé tombé et j'ai retiré la photo de profil du header... Déception quand même mais je reviendrais dessus un de ces jours.

[@kodaps_fr]

Ca ressemble effectivement pas mal à un probleme de cache browser. Pour ça il n'y a pas 15 000 possibilités - si l'image change, il faut changer son URL ou attendre que le cache du navigateur expire.....

[@remy8587]

Non mais au final concrètement il se passe quoi quand un composant serveur est mis à jour? Une requete ajax? C’est comme htmx du coup? C juste des requete http get sous jacente?

[@kodaps_fr]

C'est expliqué ici www.plasmic.app/blog/how-react-server-components-work#consuming-the-rsc-format un peu rapidement mais effectivement ca ressemble au HTMX (à part que c'est un format streamable et que le HTMX c'est du HTML)