Home >Web Front-end >JS Tutorial >From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization
Dans cet article, nous explorerons l'origine de React, les problèmes qu'il résout et
pourquoi Next.js a été créé. Bien qu'il soit largement connu que Next.js propose le SSR (rendu côté serveur), nous allons approfondir ce qu'est réellement le SSR et pourquoi il pourrait être meilleur que le CSR (client- côté rendu) dans certains cas.
Avant que React.js popularise le concept de CSR (rendu côté client), la plupart des applications suivaient le modèle traditionnel MPA (application multipage). Dans les MPA, le serveur gérait le rendu du HTML, un processus dont nous verrons qu'il présentait à la fois des avantages et des inconvénients.
Comme nous pouvons le constater, le rendu de la page était simple. Vous envoyez une requête au serveur, il faut un certain temps pour configurer le HTML nécessaire, le renvoie et oui, la page est chargée.
Alors, quel est le problème ? A ce stade, il n’y en a pas. En fait, cette approche peut sembler plus efficace que la façon dont React.js gère le chargement des pages, du moins au début. Cependant, le problème survient lorsque les utilisateurs commencent à interagir avec la page. Passons en revue un scénario hypothétique :
c'est ce que React essayait de corriger
Comment React a-t-il résolu le problème ?
React a introduit le concept révolutionnaire de rendu côté client (CSR). Au lieu de restituer le HTML sur le serveur, CSR le restitue sur le navigateur du client.
Mais comment ça marche ?, étant donné que lorsque vous chargez la page pour la première fois, le serveur doit toujours servir du HTML ?
Voici ce qui se passe : le serveur envoie un squelette HTML initial, mais il ne contient pas le contenu réel. Au lieu de cela, il inclut un