Optimisation des temps de construction dans Jamstack – DPR et Next.js de Netlify

Cet article explique comment réduire les temps de génération à l'aide du rendu persistant distribué, un concept créé par l'équipe Netlify. En utilisant ce concept, nous allons créer un blog simple à l'aide de Next.js, en pré-générant uniquement notre publication la plus récente au moment de la création et en différant les autres publications jusqu'à la demande initiale.

Dans cette publication, nous verrons comment procéder. optimiser les temps de construction à l'aide d'un nouveau concept appelé Distributed Persistent Renderingintroduit par Netlify. Ce concept résout certains des problèmes rencontrés par les développeurs lors de la création de sites volumineux sur la Jamstack en réduisant les temps de création.

En utilisant ce concept, nous allons créer un blog simple en utilisant Next.js qui affiche certains de nos favoris. personnages de Game of Thrones.

Cet article suppose – ou espère que c'est peut-être un meilleur mot – que vous connaissez les bases de React et Next.js; cependant, je vais aller de l'avant et expliquer certaines des terminologies. et vous pouvez extraire les données selon vos besoins.

L'architecture Jamstack offre également un avantage de performances à grande échelle, car votre contenu peut être pré-généré à l'avance et diffusé via des CDN, garantissant un chargement rapide de vos pages tout en offrant une expérience utilisateur exceptionnelle.[19659008]Qu'est-ce que Next.js ?

Next.js est un framework open source basé sur React qui permet plusieurs fonctionnalités supplémentaires, telles que l'extension de la capacité de React pour inclure des applications rendues sur le serveur (rendu côté serveur) et un site Web statique génération. Les applications React traditionnelles restituent tout leur contenu dans le navigateur côté client. Next.js suit les principes fondamentaux de Jamstack, qui permet une utilisation efficace du CDN pour servir des applications Web aux consommateurs, améliorant considérablement la vitesse des applications.

Rendu persistant distribué (DPR)

Le rendu persistant distribué est un nouveau concept introduit par l'équipe de Netlify, et il est construit sur les principes de base de Jamstack. La création d'un site de commerce électronique ou d'un site extrêmement volumineux peut entraîner des temps de création très longs en raison du nombre de pages Web à créer. Cette approche vous permet de créer progressivement votre site en divisant vos actifs en deux catégories.

• Contenu critique
• Contenu différé

Cela réduit le temps nécessaire pour créer des sites vraiment volumineux en offrant aux développeurs la possibilité de pré- construire certaines pages tôt (le contenu critique) et reporter ou reporter d'autres jusqu'à ce qu'elles soient demandées pour la première fois. Les pages différées sont créées et mises en cache à la périphérie lorsqu'elles sont demandées pour la première fois. le testera avec Next.js.

Next.js Setup

Nous utiliserons ce Next.js Netlify starter créé par Cassidy Williams chez Netlify. Tout d'abord, rendez-vous dans le référentiel et cliquez sur le bouton Déployer sur Netlify dans le fichier README.md. Il vous sera demandé de connecter Netlify à votre compte GitHub, où un référentiel appelé next-netlify-starter sera créé pour vous. Cliquez sur le bouton Enregistrer et déployer et vous serez redirigé vers l'écran de présentation de votre site sur votre tableau de bord Netlify.

Cliquez sur le lien Plugins sur votre tableau de bord Netlify, et vous voyez que le plugin Essential Next.js a été automatiquement installé pour vous. Ce plugin configure votre site sur Netlify pour activer la fonctionnalité clé Next.js, et il crée une fonction Netlify pour chaque page Next.js qui en a besoin. Une fois ce plugin installé, nous aurons un accès automatique aux constructeurs à la demande prêts à l'emploi lorsque nous travaillerons avec Next.js. Cool, n'est-ce pas ?!

Maintenant, suivez les étapes ci-dessous pour cloner le projet localement :

• Installez le projet et ses dépendances avec npm install.
• Démarrez votre serveur de développement avec npm run dev.
• Rendez-vous sur localhost:3000 sur votre navigateur, et vous devriez voir un écran qui dit Bienvenue dans mon application !

Nous allons récupérer les données dont nous avons besoin à partir de ce point de terminaison d'API externe. Créez un répertoire posts dans le répertoire pages ; puis créez un fichier index.js dans le répertoire posts. Le chemin du fichier doit ressembler à ceci : pages/posts/index.js.

Ajoutez le code suivant au fichier index.js :

import Link de "next/link";
import Footer from "@components/Footer";
import Image de "next/image" ;

export default function Home({ caractères } ) {
  return (
    <div className="container">
      <h1>Jeu de Trônes Casts</h1>
      <main className="index_post"> 
        {caractères.map((caracter) => {
          const[19659044]{ id, imageUrl, fullName } = character;
          return (
             <div
              clé={id}
              className="post"
              style={{
                afficher: "flex",
                justifierContent: "centre",
                alignItems: "center",
              }}
            >
              <Link href={`/[19659083]${id}`}>
                <a>
                  <div
                    style={{
                      afficher: "flex",
                      alignItems: "center",
                      flexDirection: "colonne",
                    }}
                  >
                    <Image
                      largeur="300px"
                      hauteur="300px"
                      src={imageUrl}
                      alt="postImage"
                    />
                    <h3>{fullName}< /h3>
                  </div>
                </a>
              </Lien>
            </div>
          );
        })}
      < /main>[1965904]<Pied de page />
    </div>
  );[19659132]}
export async function getStaticProps() {
  const res = await  fetch("https://thronesapi.com/api/v2/Characters");
  const caractères = wait res.json();
  ret urne {
    accessoires: {
      caractères,
    },
  };
}

Nous renvoyons nos caractères à l'intérieur de l'objet props dans le Fonction getStaticProps(). De cette façon, getStaticProps() récupérera nos données externes requises, la liste des personnages dans Game of Thrones, et elles seront transmises au composant HomePage en tant qu'accessoire. Pour chaque personnage, nous affichons une image et le nom du personnage. Si vous allez sur http://localhost:3000, vous devriez voir une liste de tous les personnages renvoyés par cette API.

Maintenant, créons un composant CharacterDetailPage qui renvoie des chemins avec des routes dynamiques vers des pages individuelles. Créez une page appelée urn:uuid:6f9e6e2c-fec4-4eb0-acb3-d6e490c878b7.js sous les publications. Cela devrait être le chemin de chaque caractère /posts/.

Dans le [id.js] fichierajoutez ce qui suit :

import Image from  "suivant/image";

export default fonction CharacterDetailPage({ character }) {[19659045]const {[1945904] nom complet, titre, famille, imageUrl } = caractère ;
  
  return (
    <div className="id-post">
      <main>
        < h1>{fullName}</h1>
        <Largeur de l'image=[19659048]"400px" height="400px" src={imageUrl} alt="postImage" />
        <h2>{title}</h2>
        <h4>{family}</h4>
       </main>
    </div>
  );
}
export async[19659038]function getStaticPaths() {
  const res = await fetch("https:/ /thronesapi.com/api/v2/Characters");
  const caractères = await res.json ();
  const stark = caractères.filter(
    (caractère)[19659059]=> caractère.f amily === "Maison Stark"
  );
  const chemins = stark.map( (personne) => ({
    params: { id: personne.id.toString() }[19659030],
  }));
  retour { chemins, repli : faux  };
}
export async function getStaticProps({ params }) {[19659045]const res = await fetch(
    `https://thronesapi.com/api/v2/Characters/${params .id}`
  );
  const caractère = wait res .json();
  retour {
    accessoires: {
      character,
    },
  };
}

Dans l'extrait de code ci-dessus, nous définissons le chemin que nous voulons générer au moment de la construction dans le getStaticPaths() fonction. Nous filtrons tous les personnages et pré-générons uniquement les chemins des personnages de la famille de House Stark au moment de la construction. Les chemins des personnages d'autres familles seront différés et générés à la demande initiale. Dans notre instruction de retour de fonctions, nous passons les cheminset nous passons également false comme valeur de fallback.

Essayez d'accéder à l'un des les personnages de la maison Stark (par exemple, Arya Stack ou Jon Snow). Vous aurez accès à leur page de détails car nous avons pré-généré leurs chemins dans la fonction getStaticPaths().

Parce que nous définissons false comme valeur de fallback ici, si nous demandons qu'un personnage dont le chemin n'a pas déjà été généré ou qui ne faisait pas partie de ce que nous avons défini dans la fonction getStaticPaths() soit généré au moment de la construction (par exemple, Daenerys Targaryen de la maison Targaryen) , nous obtiendrons une page 404.

Ce n'est pas le comportement que nous souhaitons. Nous souhaitons tout de même pouvoir accéder aux personnages d'autres familles dont les chemins Pour ce faire, nous devons définir la valeur de fallback sur true ou blocking dans getStaticPaths().

return { paths, fallback: true };

Lorsque la valeur de fallback est définie sur true ou blockingsi nous essayons d'accéder à un personnage dont chemin que nous n'avons pas pré-généré, dans les coulisses, Next.js générera le chemin de ce personnage et le mettra automatiquement en cache sur le CDN périphérique de Netlify. Désormais, le personnage sera disponible pour nous comme s'il faisait partie de la construction d'origine. Lorsque quelqu'un qui visite notre site essaie d'accéder aux détails de ce même personnage, il sera fourni à partir du cache et n'aura pas besoin d'être généré à nouveau.

Résumé

Nous avons testé ce concept sur un site simple, mais que se passe-t-il si vous travaillez sur un grand site qui compte des milliers de pages, selon le cas ? Imaginez le temps que vous passeriez sur chaque version.

Nous avons vu qu'utiliser les générateurs à la demande de Netlify pour créer uniquement les pages critiques et différer les autres pages qui ne sont pas très importantes jusqu'à ce qu'un utilisateur les demande pour la première fois. peut réduire considérablement nos temps de construction et entraîner des cycles de développement plus rapides et une meilleure productivité.

Les constructeurs à la demande sont actuellement dans sa phase d'accès précoce et il est suffisamment flexible pour fonctionner sur plusieurs frameworks, mais j'aime la facilité avec laquelle il s'intègre à Next.js.