Quand utiliser SSR et SSG dans Next.js

SSR (rendu côté serveur) :

S'exécute à chaque requête adressée au serveur.
Chaque fois qu'un utilisateur visite la page, le serveur récupère les données, restitue le code HTML et l'envoie au client.
Cela garantit que le contenu est toujours à jour, mais il peut être plus lent en raison de la surcharge du traitement côté serveur.

Exemple de chronologie pour la RSS :

Demande 1 : visites de l'utilisateur A → Le serveur récupère les données, génère la page de manière dynamique et répond.

Demande 2 : visites de l'utilisateur B → Le serveur récupère à nouveau les données, génère la page de manière dynamique et répond.

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG (Génération de sites statiques) :

S'exécute au moment de la construction (lorsque vous exécutez la prochaine construction).
Le HTML et les données sont pré-rendus et enregistrés sous forme de fichiers statiques. Ces fichiers sont servis directement aux utilisateurs, ce qui le rend très rapide.

Facultatif : si vous utilisez la revalidation, Next.js reconstruira la page en arrière-plan après l'intervalle de temps spécifié, garantissant ainsi la disponibilité du contenu mis à jour.
Exemple de chronologie pour SSG avec revalidation : 60 :

Temps de construction : la page est pré-rendue avec les données disponibles au moment de la construction.

Demande 1 : (après la construction) : l'utilisateur A visite → Le HTML statique est servi.

Régénération en arrière-plan (après 60 secondes) : Next.js récupère de nouvelles données et régénère la page.

Demande 2 : (après régénération) : Visites de l'utilisateur B → Le HTML statique mis à jour est servi.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key="{post.id}">{post.title}</div>
      ))}
    </div>
  )
}

SSR : Récupère de nouvelles données et génère la page à chaque demande.

SSG : pré-rend la page une fois au moment de la construction (ou pendant les intervalles de revalidation programmés) et propose la même page prédéfinie à tous les utilisateurs jusqu'à ce qu'elle soit régénérée.

Utilisez SSR lorsque :

Vous avez besoin d'un contenu en temps réel et à jour (par exemple, des tableaux de bord, des données spécifiques à l'utilisateur).
Le contenu change fréquemment et ne peut pas être mis en cache efficacement.

Utilisez SSG lorsque :

Le contenu ne change pas souvent (par exemple, articles de blog, pages marketing).
La vitesse et les performances sont essentielles.

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!