Next.js - Pré-rendu

Dans Next.js, nous savons qu'il génère du HTML pour une page appelée pré-rendu. Next.JS prend en charge deux types de pré-rendu.

  • Static Generation- Cette méthode génère la page HTML au moment de la construction. Ce HTML pré-rendu est envoyé à chaque demande. Cette méthode est utile pour le marketing de sites Web, de blogs, de produits de commerce électronique répertoriant des sites Web, des aides, des sites Web de documentation.

  • Server Side Generation- Cette méthode génère la page HTML à chaque demande. Cette méthode convient lorsque le contenu d'une page html peut varier avec chaque demande.

Pré-rendu par page

Next.JS permet de définir une méthode de pré-rendu pour chaque page où la plupart des pages suivent la génération statique et d'autres pages utiliseront le rendu côté serveur.

Génération statique sans données

La génération statique peut être effectuée sans données, auquel cas les pages HTML seront prêtes sans avoir besoin de pré-extraire les données, puis de commencer le rendu. Les données peuvent être récupérées plus tard ou sur demande. Cette technique aide à montrer à l'utilisateur une interface utilisateur sans aucune donnée au cas où les données prennent du temps à venir.

Génération statique avec des données

La génération statique peut être effectuée avec des données, auquel cas les pages HTML ne seront pas prêtes tant que les données ne seront pas récupérées, car HTML peut dépendre des données. Chaque composant a une méthode spécialegetStaticProps qui peut être utilisé pour récupérer des données et passer des données en tant qu'accessoires de la page afin que la page puisse rendre les données en accord avec les accessoires passés.

La fonction getStaticProps () s'exécute au moment de la construction en production et s'exécute pour chaque requête en mode développement.

Créons un exemple pour démontrer la même chose.

Dans cet exemple, nous allons créer une page de mise à jour index.js et first.js pour créer un appel de serveur pour obtenir des données.

Mettons à jour le projet nextjs utilisé dans le chapitre Global CSS Support .

Mettez à jour le fichier index.js dans le répertoire pages pour utiliser la méthode getServerSideProps (). Cette méthode sera appelée par requête.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Mettez à jour le fichier first.js dans le répertoire pages pour utiliser la méthode getStaticProps (). Cette méthode sera appelée une fois.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Démarrez le serveur Next.js

Exécutez la commande suivante pour démarrer le serveur -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Vérifier la sortie

Ouvrez localhost: 3000 dans un navigateur et vous verrez la sortie suivante.

Cliquez sur le lien Premier message.