From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization-JS Tutorial-php.cn

From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization

Patricia Arquette

Release： 2024-10-04 06:18:29

Original

1036 people have browsed it

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.

Un bref historique : Avant React.js

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.

From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization

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 :

Vous entrez dans une page.
Vous vous connectez (client -> serveur (pour l'authentification) -> DB (vérifier l'utilisateur)) et inversement. Pas de problème ici.
Vous accédez, par exemple, à la page des publications (client -> serveur -> DB (obtenir les publications)) et revenez avec les données de publication. Pas de problème ici.
Créez une nouvelle publication (client -> serveur (avec nouvelle publication) -> DB (ajouter une nouvelle publication)) et revenez avec un entièrement nouveau HTML. C’est ici que le problème se pose. Lorsque vous ajoutez une nouvelle publication ou apportez des modifications à la page, le serveur doit restituer l'intégralité du code HTML à partir de zéro. Cela entraîne un re-rendu pleine page, ce qui peut s'avérer inefficace. Ce nouveau rendu complet se produit chaque fois que vous mettez à jour ou modifiez quoi que ce soit sur la page.

c'est ce que React essayait de corriger

From PreReact to React and Next.js A Journey Through Web Rendering and Performance Optimization

Entrez maintenant React.js

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