Pour les pages dynamiques dans Next.js, la solution la plus couramment utilisée est getServerSideProps, car elle permet de récupérer des données à chaque requête, ce qui est essentiel lorsque les données sont susceptibles de changer fréquemment.
Cependant, getStaticProps peut également être utilisé pour les pages dynamiques dans certains cas, en particulier lorsque les données ne changent pas fréquemment ou lorsque vous pouvez générer des versions statiques des pages avec tous les scénarios possibles.
Voici un aperçu de quand utiliser chaque méthode :
getServerSideProps
- Utilisé pour les pages où les données doivent être récupérées à chaque requête.
- Convient pour les données qui changent fréquemment ou pour les pages nécessitant une authentification utilisateur à chaque visite.
- Utile pour les pages dynamiques qui dépendent de l'état actuel de l'application ou de l'utilisateur.
export async function getServerSideProps() {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}
export default function Page({ repo }) {
return repo.stargazers_count
}
getStaticProps
- Utilisé pour les pages dont les données changent moins fréquemment ou peuvent être générées à la construction.
- Idéal pour les pages avec des données relativement statiques qui ne nécessitent pas de mise à jour à chaque visite.
- Peut être utilisé pour des pages dynamiques où vous pouvez prévoir et générer les différentes versions statiques possibles.
export async function getStaticProps() {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}
export default function Page({ repo }) {
return repo.stargazers_count
}
Voici quelques raisons pour lesquelles getServerSideProps peut être nécessaire :
Données dynamiques à chaque requête
Si vos données changent fréquemment et doivent être mises à jour à chaque visite de la page, getServerSideProps est une excellente option car il récupère les données à chaque requête.
Authentification utilisateur
Si vous avez besoin de données spécifiques à un utilisateur (par exemple, les données de profil de l'utilisateur actuellement connecté), getServerSideProps peut être utilisé pour s'assurer que chaque utilisateur obtient les données qui lui sont propres.
Accès à la session et aux cookies
Comme getServerSideProps est exécuté sur le serveur, vous avez un accès direct à la session et aux cookies, ce qui peut être utile pour gérer l'authentification et les autorisations.
Accès à l'API backend
Si vos données sont situées sur un serveur externe ou nécessitent une authentification côté serveur pour y accéder, getServerSideProps est approprié car il s'exécute sur le serveur.
SEO dynamique
Si vous avez besoin de générer des métadonnées ou des contenus SEO spécifiques en fonction des paramètres de requête ou des données de l'utilisateur, getServerSideProps est le bon choix.
Rendu côté serveur avec des données à jour
Si vous avez besoin d'un rendu côté serveur mais que les données changent fréquemment, getServerSideProps permet de toujours fournir des données à jour.
En résumé, pour les pages dynamiques dans Next.js, si vous avez besoin de récupérer des données à chaque visite de la page (car elles changent fréquemment ou dépendent de l'utilisateur), getServerSideProps est généralement la meilleure option. Si les données peuvent être générées à la construction et ne changent pas fréquemment, getStaticProps peut être une alternative viable.