Gérer le "Pre-rendering" avec l'option "fallback"

Faramaz Patrick

youtube.com/user/faramazpat

4 modes sur Next JS

  • Server side rendering 
  • SPA (sans getStaticProps) only browser
  • Hybride (pre-rendering dynamique) 👈
  • Full Static (export HTML)

Mode Hybride

Statique dynamique !

⚡️

👉 Server Node JS obligatoire

👉 Mode preview possible

👉 Refresh des pages possible

⚠️ Relancer un build à chaque modification de contenu n'est pas obligatoire

getStaticProps()

👉 Récupère les data pour les injecter dans le component

⏰ Au moment du pre-rendering

⚙️ Génère un fichier HTML et un fichier JSON

↓

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {
      entry: data.entry
    }, 
    // will be passed to the page component as props
    revalidate: 1, // In seconds
  }
}

getStaticPath()

👉 Générer les séries de pages au moment du build

⚠️ obligatoire dès que l'on utilise un nom de fichier avec une valeur dynamique.

[slug].js

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true or false or "blocking"
  };
}

fallback: false

↓

404 si la page n'est pas générée

fallback: true

↓

Affiche la page si pas générée. Next appelle getStaticProps() mais n'attend pas forcement.

fallback: 'blocking'

↓

Affiche la page si pas générée.

Next appelle getStaticProps() mais attend la réponse.

En vrai, ça donne quoi ?

https://github.com/ipatate/tuto-next

Next JS

By Faramaz Patrick

Made with Slides.com

Next JS

Explication sur les modes de fallback

  • 320

More from Faramaz Patrick