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.
----------

[atchakpaaahmed]

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😊

[kingelectonics]

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.

[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.

[remy]

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?