Rendu

Le rendu transforme le code que vous écrivez en interfaces utilisateur. React et Next.js vous permettent de créer des applications web hybrides où certaines parties de votre code peuvent être rendues côté serveur ou côté client. Cette section vous aidera à comprendre les différences entre ces environnements de rendu, stratégies et runtimes.

Fondamentaux

Pour commencer, il est utile de se familiariser avec trois concepts fondamentaux du web :

• Les Environnements où votre code d'application peut être exécuté : le serveur et le client.
• Le Cycle Requête-Réponse initié lorsqu'un utilisateur visite ou interagit avec votre application.
• La Frontière réseau qui sépare le code serveur et client.

Environnements de rendu

Il existe deux environnements où les applications web peuvent être rendues : le client et le serveur.

• Le client fait référence au navigateur sur l'appareil d'un utilisateur qui envoie une requête à un serveur pour votre code d'application. Il transforme ensuite la réponse du serveur en interface utilisateur.
• Le serveur fait référence à l'ordinateur dans un centre de données qui stocke votre code d'application, reçoit les requêtes d'un client et renvoie une réponse appropriée.

Historiquement, les développeurs devaient utiliser différents langages (par exemple JavaScript, PHP) et frameworks pour écrire du code côté serveur et côté client. Avec React, les développeurs peuvent utiliser le même langage (JavaScript) et le même framework (par exemple Next.js ou le framework de votre choix). Cette flexibilité vous permet d'écrire du code pour les deux environnements sans changer de contexte.

Cependant, chaque environnement a son propre ensemble de capacités et de contraintes. Par conséquent, le code que vous écrivez pour le serveur et le client n'est pas toujours le même. Certaines opérations (comme la récupération de données ou la gestion de l'état utilisateur) sont mieux adaptées à un environnement qu'à l'autre.

Comprendre ces différences est essentiel pour utiliser efficacement React et Next.js. Nous couvrirons ces différences et cas d'utilisation plus en détail dans les pages Composants Serveur et Composants Client. Pour l'instant, continuons à construire nos bases.

Cycle Requête-Réponse

Globalement, tous les sites web suivent le même Cycle Requête-Réponse :

1. Action utilisateur : L'utilisateur interagit avec une application web. Cela peut être en cliquant sur un lien, en soumettant un formulaire ou en tapant une URL directement dans la barre d'adresse du navigateur.
2. Requête HTTP : Le client envoie une requête HTTP au serveur qui contient les informations nécessaires sur les ressources demandées, la méthode utilisée (par exemple GET, POST) et des données supplémentaires si nécessaire.
3. Serveur : Le serveur traite la requête et répond avec les ressources appropriées. Ce processus peut inclure plusieurs étapes comme le routage, la récupération de données, etc.
4. Réponse HTTP : Après avoir traité la requête, le serveur envoie une réponse HTTP au client. Cette réponse contient un code de statut (qui indique au client si la requête a réussi ou non) et les ressources demandées (par exemple HTML, CSS, JavaScript, ressources statiques, etc).
5. Client : Le client analyse les ressources pour afficher l'interface utilisateur.
6. Action utilisateur : Une fois l'interface utilisateur affichée, l'utilisateur peut interagir avec elle, et tout le processus recommence.

Une partie importante de la construction d'une application web hybride consiste à décider comment diviser le travail dans le cycle et où placer la Frontière réseau.

Frontière réseau

Dans le développement web, la Frontière réseau est une ligne conceptuelle qui sépare les différents environnements. Par exemple, le client et le serveur, ou le serveur et le stockage de données.

Dans React, vous choisissez où placer la frontière réseau client-serveur là où cela a le plus de sens.

En arrière-plan, le travail est divisé en deux parties : le graphe de modules client et le graphe de modules serveur. Le graphe de modules serveur contient tous les composants rendus côté serveur, et le graphe de modules client contient tous les composants rendus côté client.

Il peut être utile de considérer les graphes de modules comme une représentation visuelle de la façon dont les fichiers de votre application dépendent les uns des autres.

Vous pouvez utiliser la convention React "use client" pour définir la frontière. Il existe aussi une convention "use server", qui indique à React d'effectuer un travail de calcul côté serveur.

Construction d'applications hybrides

Lorsque vous travaillez dans ces environnements, il est utile de considérer le flux du code dans votre application comme unidirectionnel. En d'autres termes, pendant une réponse, votre code d'application circule dans une seule direction : du serveur vers le client.

Si vous avez besoin d'accéder au serveur depuis le client, vous envoyez une nouvelle requête au serveur plutôt que de réutiliser la même requête. Cela facilite la compréhension de l'endroit où rendre vos composants et où placer la Frontière réseau.

En pratique, ce modèle encourage les développeurs à réfléchir d'abord à ce qu'ils veulent exécuter côté serveur, avant d'envoyer le résultat au client et de rendre l'application interactive.

Ce concept deviendra plus clair lorsque nous examinerons comment entrelacer des composants client et serveur dans le même arbre de composants.