CSR, SSR, Rendu Hybride, Comprendre les différents types de rendu pour un site

Article ► grafikart.fr/tutoriels/render...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Dans cette vidéo je vous propose de découvrir les différentes méthodes de rendus possibles pour un site / application web.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat

[@jimmyj.6792]

Excellente vidéo qui explique tous ces modes 🙏 merci beaucoup à toi 🙂 Grave chaud pour plus de détails 👍

[@doreaujulie7277]

Super intéressante cette vidéo : tout est tellement plus claire :)

[@jeromedicharry1340]

+1 pour parler de Static Site Generators

[@dbend]

Cette vidéo tombe pile au moment ou je dois présenter tous ces concepts dans mon agence. Un grand merci!

[@liquidebleu]

À chaque nouvelle vidéo, ou presque, ça répond à une question que je me posais les jours précédents, merci ^^

[@saidhr9142]

Merci Pour cette superbe explication 🙏 ,j'avais du mal a exprimer la différence entre SSR et CSR mais maintenant , elle est plus en plus claire

[@007bouba]

Toujours un plaisir de te suivre Grafikart !. J'ai été confronté il y'a quelques mois à une situation liée à cette question. J'avais du CSR avec Angular, les 2 problèmes aux quels j'avais fais face étaient liés à la performance notament le premier chargement qui prenait trop de temps et un SEO très pauvre. J'ai fini par utiliser Angular Universal pour le SSR avec NodeJS. Depuis, ca a résolu les problèmes de performances sont résolus et le SEO amélioré.

[@martinienfokoue7056]

yo salut. j'aimerai te contacter par rapport à angular universal stp

[@007bouba]

@@martinienfokoue7056 ok, pas de soucis.

[@chlouis-girardot]

Génial, un très bon rappel et plein de bonnes précisions ! Merci à toi, toujours au top 👍

[@alexlove2012]

Merci éormément pour tes formations de très hautes qualité 100% gratuites.

[@Sdirimohamedsalah]

Mon point de vu: 1) une APPLICATION WEB (gestion,chat, drawing...) meilleur choix serai react, angular...) 2- vitrine : SSR avec cache 3- E-commerce SSR avec svelte

[@florianginet7615]

Au top , comment rendre les types de rendus concis , belles explications . Merci Grafikart 👌

[@valentincamus8343]

Merci pour la vidéo d'une grande qualité, tu parles de suivre le sujet avec d'autres vidéos, je serai preneur, par exemple avec des projets de démo :).

[@vivouprince]

Très belle présentation pédagogique. Merci. Je suis preneur sur d'autres vidéos sur le sujet...👍

[@jeremiecuneo1442]

Hyper clair, as always. Merci pour cette super vidéo !

[@andykani6195]

Encore une explication claire et concise

[@atba3mohamed440]

Très intéressant comme d’habitude un sujet très important et pas assez maîtrisé même par les développeur une suite a cette vidéo serait très bénéfique à coup sûr

[@snoudev]

Toujours aussi superbes tes vidéos, merci 😉😉😉

[@llyamk3i400]

j'avais besoins de cette video

[@mekaclaude]

Superbe vidéo. Infos super intéressantes. 🔥 Je note aussi que les CMS pour tout ce qui est CSR sont très coûteux. Ce serait cool de parler des API, headless CMS, flat CMS, SSG... la gestion du contenu et l'évolution de WordPress et des WYSIWYG ( Wix... webflow ) .

[@josuembiyavanga2197]

Très utile cette vidéo, merci. Le CSR (SPA) avec un peu du SSR (hybride côté client comme vous l'avez appelé) fera l'affaire pour pas mal des cas que le SSR pure risquerait d'être de plus en plus mis de côté !

[@worksfatherwemagic3152]

C'est ce que je me dis aussi. Mais avec cette vidéo, je me dis faudrait veiller à bien choisir les technologies. Sinon ça risque de ne pas donner les résultats escomptés. Moi par exemple, j'utilise de plus en plus vueJs en SSR en front et Symfony en back. Mais dans sa vidéo, il explique bien l'intérêt d'utiliser la même technologie en front et backend pour plus d'efficacité niveau SEO 13:50. Du coup, je me repose la question de technologie pour mes applis. Faut que je refasse quelques recherches pour bien analyser.

[@josuembiyavanga2197]

@@worksfatherwemagic3152 ah oui, c'est très important le choix de la technologie lié au contexte. Bref ça dépend vraiment du problème à résoudre.

[@Thesupergeeeks]

Genial ta video tout journée aussi éguisée qu'un sabre de samouraï 👍 Merci

[@Nerwesta]

Bonne vidéo qui permet de synthétiser le tout, même si pour certains ce sont des choses connues c'est toujours agréable d'avoir ton point de vue la dessus. Concernant Reddit je pense assez intéressant de noter qu'il faut parler de New Reddit ici avec énormément de JS qui est chargé a la volée, sauf erreur de ma part Old Reddit a une structure côté serveur assez classique. J'utilise la même approche "d'enrichissement" sur mon site, où je vais mettre tout d'abord un SSR assez classique et "enrichir" certains composants pour l'expérience utilisateur avec du JS et non pas la totalité du site. Un peu a la manière de ton site au final si je comprends bien

[@command_maker6]

Très bonne vidéo merci 🙏

[@kohelet910]

vraiment intéressant! merci!

[@diabolosvp31]

Cetait parfait👌

[@4B2P_ttv]

Je suis un expert SEO depuis des années et j'avoue que beaucoup de gens devrait regarder ta vidéo qui explique parfaitement les avantages et inconvénients ainsi que les applications. Beau travail

[@adamkenton2585]

Très bonne vidéo

[@tcgvsocg1458]

Super video merci à toi

[@onlinenk13]

Merci pour la vidéo, c'était très instructif. Tu peux faire une vidéo sur les différentes types de CSR ?

[@peterhirt991]

très bien fait! merci bcp. Ce qui m'intéresse aussi c'est de voir une technologie hybride coté client comme Nuxt.js plus en détail, l'architecture etc. Example de "code walk-through" serait très apprécié. Aussi, comme j'ai forcément un serveur, comment l'utiliser aussi pour servir un petite database au lieu d'avoir encore un autre serveur pour la db.

[@alphonced53]

MERCI ❤

[@hsider]

Excellente vidéo. je vous invites a découvrir Qwik, une autre solution SSR sans hybridation. la syntaxe et inspirée de ReactJS pour ne pas nous obliger a apprendre une nouvelle.

[@emichel]

Comme d'hab 💪💪

[@gabrieltavernier]

Il y a un point que tu as abordé côté serveur mais pas côté client c'est celui de la performance. Côté serveur on maîtrise la puissance de notre application. Si on a des milliers de visiteurs ça oblige à investir plus fortement sur le serveur mais on maitrise globalement la performance. Côté client la performance repose presque entièrement sur le terminal du client. Si notre application est un peu lourde et que le client en face n'est pas suffisamment performant l'expérience utilisateur peut être fortement impactée. C'est un aspect qu'on pourrait aborder du point de vue Green IT aussi ! Est-ce plus écolo d'avoir un gros serveur qui fasse le rendu et en face des clients qui donc consomment moins ? Ou alors un serveur plus léger mais en face des centaines (voir des milliers) de clients qui travaillent plus ?

[@lmz-dev]

Un développeur qui se préoccupe du Green IT ? Hooo ^^ je ne pensais pas voir ça un jour dans les commentaires ;p Je blague mais si tu choisis d'utiliser un framework genre Laravel ou Symfony, qui prennent 120 ms (en local) pour générer la page Hello, bouffent 6 mèg de mémoire, charge plus de 250 fichiers alors que t'as encore rien fait même pas une connexion à la base de données ... bah pour l'écologie : c'est mort ! En gros 75% des sites sont propulsés par WordPress, et c'est pas une formule 1, encore moins son extension WooCommerce qui nécessite un serveur dédié si tu sais que tu vas avoir plus de 3 clients par heure ;p Laisse tomber l'écologie pour le Web, c'est pas compatible ...

[@gabrieltavernier]

@@lmz-dev aujourd'hui ce n'est pas une priorité mais ça va le devenir, j'y crois 😅

[@lmz-dev]

@@gabrieltavernier Tu crois vraiment que Poutine va couper le gaz ? 🤣

[@grafikart]

Si tu as un comparatif je suis curieux de savoir ce qui coûte le plus entre la data ou le calcul cpu. Mais c'est une question que je me suis aussi posée. Mais si l'électricité engendre un sur coût les gens auront tendance à préféré bouger le travail côté client pour échapper les coût

[@irotv7584]

C'est marrant pcq quand je code en react et que j'ai besoin de changer un state, je me pose tjr la question de est ce que je me facilite le travail en fetchant la data et je maj le state ensuite ou alors je m'embête à faire du props drilling de fonction pour set le state en aval ou en amont. En gros est ce que je bouffe du réseau à chaque fois pour set un composant ou alors je ne le fais qu'une seule fois et je passe la data en props dans la limite du possible et de la compréhension du code.

[@lilidev718]

Hello, merci pour la qualité des vidéos. Il y aurait moyen d'avoir une vidéo découverte de nuxt ? Merci

[@___Kevin]

Effectivement ce serait génial !

[@bestkale-lg2ef]

Merci

[@LNDev]

Super vidéo ! ✨ Je comprends mieux comment Sveltekit fonctionne.

[@ley0x]

Sous toute les vidéos tu es là 😂😂

[@LNDev]

@@ley0x 😁😁 c'est notre maître

[@ludo8186]

Très bonne vidéo, merci. Comment evaluer la portion client / serveur pour un CMS et en déduire s'il est ou non adapté à un bon référencement?

[@marouaniAymen]

Merci pour cette explication, serait-il possible de faire une vidéo qui explique le concept et les approches actuelles pour le micro-frontend ?

[@grafikart]

Tu as quelque chose en tête car j'ai du mal à comprendre à quoi micro-frontend fait référence.

[@patrickvilleneuve527]

Vidéo très claire. Mais dommage que la librairie "htmx" n'ait pas été citée pour de l'hybride centré serveur. Il s'agit pourtant de la librairie la plus simple à mettre en oeuvre (sur tout type de backend), la plus souple et la plus puissante.

[@devnetwork168]

Super vidéo, question pour résoudre le problème du référencement en CSR , la solution ne serai pas de fais un Map en XML pour que le référencement de fasse correctement ?

[@vincentr6344]

merci beaucoup, très clair comme toujours.

[@jaydenwon5902]

greateeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

[@DemOneGaming]

Vers 4min, corriges moi si je me trompes mais de ce que je sais: single page app n'est pas synonyme de client side rendering. On peut très bien produire une single page app avec nextjs et avoir un server side rendering non? Single page app c'est quand y a un en fait qu'une seule page avec un "fake" routing qui render juste des composants différents

[@kingezechias8477]

Excellente vidéo. Je veux savoir le meilleur frontend entre react JS, nextJS et AngularJS ou autre que je peux utiliser au moment du développement d'un logiciel web comme microfinance, gestion d'hôpital, e-commerce, .... J'utilise java spring comme backend et aussi votre conseil. merci

[@grafikart]

NextJS utilise React du coup c'est pas forcément comparable (NextJS est un framework par dessus la librairie React). AngularJS est obsolète en 2022 au profit d'Angular. Entre Angular et React je te conseille de tester rapidement en 1 ou 2 journées pour voir quel style de développement te convient le mieux car pour ce que tu as décrit les 2 conviendront parfaitement.

Nuxt3 évoque un rendu "Hybride". De ce que j'ai compris, ça fonctionnerait avec le meilleur des 2 mondes. La page serait générée à la demande puis "cachée" pour que la fois suivante on ne demande plus au serveur. Je serai curieux d'avoir ton retour là dessus ;)

[@grafikart]

Je pense que tu fais référence à la génération statique incrémental (en résumé ils viennent de réinventer le cache). Le problème est du coup l'invalidation de ce cache qui peut rapidement devenir complexe à gérer. Le problème que j'ai avec Nuxt (mais aussi Next, Sveltekit) est que tu es limité par le choix front-end pour l'architecture de ton application.

[@electroheadfx]

super, par contre on oublie peut-être le streaming avec Marko et maintenant SolidJS (qui partagent le même développeur Ryan Carniato) et aussi le tout dernier Qwik (par le développeur de Angular) qui fait du résumable (unique) ?

[@grafikart]

Au final je pense que ça peut être catégorisé dans du rendu côté client, à la différence que les composants peuvent être chargé par morceau d'après ce que je comprends. Mais je ne connaissais pas Marko / Qwik j'y jetterais un oeil merci

[@electroheadfx]

c'est annoncé, qwik pourra (bientôt) fonctionner avec des composants React et les faire fonctionner en streaming et resumability

[@inwardmovement]

Une petite vidéo sur le SSG en complément ?

[@thoniorandriamialisona3933]

Et paf... ça fait des chocapic! xD

[@forsethtv7190]

CSR pour moi =)

[@valeryyomba5561]

Svp mr faites un tutoriel pour montrer comment faire une insertion de masse en lisant un fichier Excel et en insérant toutes les lignes en base de données pardon je suis sur un gros projet et je suis bloqué à ce niveau

[@grafikart]

Pas de super astuce tu boucle en traitant groupe par groupe

[@masterchief9148]

Pour un site fait maison qui ressemble à TMBD où vous seriez le seul utilisateur, vous iriez plus sur du SSR ou du CSR ?

[@grafikart]

C'est quoi tmbd

[@masterchief9148]

@@grafikart Les initiales du site The Movie Database

[@grafikart]

Ah ok j'aurais tendances à faire du SSR, car tu veux l'indexation et la navigation recharge la quasi totalité de la page donc pas forcément beaucoup de bénéfice au CSR.

[@masterchief9148]

@@grafikart Je vois ! Et dans le cas où l'indexation ne serait pas du tout recherchée la donne pourrait changer ? J'ai en tête le fait que dans la recherche on puisse filtrer mais si on choisi un des éléments, que la page de celui-ci se charge, lors du retour en arrière tout le filtrage aura été effacé en SSR non ?

[@valeryyomba5561]

Slt mr j'ai pu importer mon fichier excel en php dans ma bd j'ai un gros soucis on me demande de faire un matching de sorte que lors du chargement on puisse créer une table tampon qui va contenir la première ligne de notre fichier Excel qui correspond aux noms des champs du fichier Excel de l'afficher dans un table et d'afficher sur un autre table les champs de la table de notre base de données qu'on soit remplir en suite qu'on face un matching avec les champs de notre bd de façon à ce que le champs de la bd qu'on aura lié avec le champs du fichier Excel recevra les valeurs de ce champs Excel J'espère que vous me comprenez si oui je veux je veux juste savoir si c'est faisable ou pas et si c'est faisable donnez moi un indice un truc à aller exploiter sur internet pour pouvoir implémenter ça je vous supplie répondez moi

[@blokche_dev]

unpoly c'est dans la logique pjax un peu du coup ?

[@grafikart]

Oui la logique initiale est la même effectivement

[@taniax8944]

Eh merde, je pensais que j'allais pouvoir faire de référencement plus tard en faisant du SSR avec angular/windev. Comment je vais expliquer toutes ces heures perdues à mon boss

[@MrgnUTube]

Pourquoi tu ne pourrais pas avec Angular Universal (SSR)?

[@eliyasmhammed6693]

Free