Rendu côté serveur (SSR) à l'aide de Next.js et JavaScript

Dans le monde du développement Web, offrir une expérience utilisateur rapide et transparente est crucial. Une façon d'y parvenir consiste à utiliser le rendu côté serveur (SSR), une technologie qui permet aux pages Web d'être restituées sur le serveur avant d'être envoyées au client. SSR offre de nombreux avantages, notamment des performances améliorées, une optimisation du référencement et une meilleure interaction avec les utilisateurs. Dans cet article, nous explorerons les bases de SSR à l'aide de Next.js, un framework JavaScript populaire pour créer des applications React rendues par le serveur.

Qu'est-ce que le rendu côté serveur (SSR) ?

Traditionnellement, les applications Web s'appuient sur le rendu côté client, où l'ensemble du processus de rendu se déroule sur le navigateur à l'aide de JavaScript. Cette approche fonctionne bien pour les petites applications, mais peut entraîner un chargement initial des pages plus lent, de mauvaises performances de référencement et une accessibilité limitée.

Le rendu côté serveur, quant à lui, consiste à générer le contenu HTML complet sur le serveur et à l'envoyer au client. Le client reçoit alors une page entièrement rendue, prête à être affichée à l'utilisateur. Cette approche permet aux moteurs de recherche d'explorer la page plus efficacement et d'améliorer les performances perçues par l'utilisateur.

Présentation de Next.js

Next.js est un framework React qui fournit des capacités de rendu intégrées côté serveur. Il simplifie le processus de création d'applications SSR en éliminant la complexité de l'installation et de la configuration côté serveur. Next.js offre également des fonctionnalités telles que le fractionnement automatique du code, le rendu côté client et la génération de sites statiques, ce qui en fait un choix polyvalent pour le développement Web moderne.

Mettre en place le projet Next.js

Pour commencer à utiliser Next.js, assurez-vous que Node.js est installé sur votre ordinateur. Créez un nouveau répertoire pour votre projet et initialisez-le à l'aide de la commande suivante -

npx create-next-app my-next-app

Cette commande configure un nouveau projet Next.js avec les fichiers et dépendances nécessaires. Accédez au répertoire du projet en exécutant -

cd my-next-app

Après être entré dans le répertoire du projet, utilisez la commande suivante pour démarrer le serveur de développement -

npm run dev

Next.js démarrera le serveur de développement local à l'adresse http://localhost:3000 et vous pourrez voir votre application s'exécuter dans votre navigateur.

Créer des pages rendues côté serveur

Next.js facilite incroyablement la création de pages rendues côté serveur. Dans la structure du projet, accédez au répertoire Pages et créez un nouveau fichier appelé about.js. Ce fichier représentera la route /about dans notre application.

Dans about.js, ajoutez le code suivant -

function About() {
   return (
      <div>
         <h1>About Page</h1>
         <p>This is the server-side rendered About page.</p>
      </div>
   );
}

export default About;

Enregistrez le fichier et si le serveur de développement Next.js est en cours d'exécution, vous pouvez accéder à http://localhost:3000/about pour voir la page rendue.

Regardons le code de plus près. Le composant About est un composant fonctionnel React qui renvoie du JSX qui représente le contenu de la page À propos. Dans ce cas, il restitue un élément contenant un titre

et un paragraphe

.

L'instruction export default About à la fin exporte le composant About comme exportation par défaut, ce qui permet à Next.js de le reconnaître comme une page rendue côté serveur.

Après avoir accédé à la route /about, le serveur restituera le composant About et le client recevra la représentation HTML complète de la page. Cette approche garantit que la page est entièrement rendue avant d'être envoyée à l'utilisateur, améliorant ainsi les performances et le référencement.

Rendu côté serveur dynamique

Next.js prend également en charge le rendu dynamique côté serveur, nous permettant d'obtenir des données à partir d'API externes ou d'effectuer des calculs côté serveur avant de rendre la page. Cela nous permet de proposer du contenu dynamique aux utilisateurs sans recourir au JavaScript côté client.

Pour démontrer le rendu dynamique côté serveur, créons une page qui obtient les données d'une API fictive. Dans le répertoire pages, créez un nouveau fichier appelé users.js -

function Users({ users }) {
   return (
      <div>
         <h1>User List</h1>
         <ul>
            {users.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
}

export async function getServerSideProps() {
   const response = await  fetch('https://api.example.com/users');
   const users = await response.json();

   return {
      props: {
         users,
      },
   };
}

export default Users;

Instructions

Dans le code ci-dessus, nous définissons un composant fonctionnel Users qui reçoit les données utilisateur en tant qu'accessoire. Il utilise les données reçues pour afficher une liste d'utilisateurs. La fonction getServerSideProps est une fonction asynchrone qui récupère les données d'une API externe (https://api.example.com/users dans ce cas).

Dans getServerSideProps, nous utilisons la fonction fetch pour effectuer une requête HTTP à l'API et récupérer les données utilisateur. Nous analysons ensuite la réponse en JSON et l'attribuons à la variable de l'utilisateur. Enfin, nous renvoyons un objet avec des accessoires contenant les données utilisateur récupérées.

Lorsqu'un utilisateur accède à la route /users, Next.js appellera la fonction getServerSideProps sur le serveur pour obtenir les données. Les données utilisateur obtenues seront transmises en tant qu'accessoires au composant Utilisateurs pour le rendu. Cela garantit que la page est toujours affichée avec les données les plus récentes à chaque demande.

Le rendu dynamique côté serveur est une fonctionnalité puissante qui nous permet de créer des pages basées sur les données et de fournir un contenu personnalisé aux utilisateurs. En transférant les données sur le serveur, nous pouvons optimiser les performances et garantir une expérience utilisateur cohérente sur différents appareils et conditions de réseau.

Conclusion

Le rendu côté serveur (SSR) utilisant Next.js et JavaScript fournit un moyen efficace de créer des applications Web hautes performances. En tirant parti des capacités de rendu côté serveur de Next.js, nous pouvons proposer des pages entièrement rendues à nos utilisateurs, améliorant ainsi les performances, la visibilité des moteurs de recherche et l'expérience utilisateur globale.

Cet article présente SSR, décrit la configuration d'un projet Next.js et montre comment créer une page rendue côté serveur. Nous avons exploré les avantages du rendu côté serveur et comment Next.js simplifie le processus de mise en œuvre de SSR dans les applications React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!