Photo by Lautaro Andreani on Unsplash
Salut tout le monde ! Comment s’est passée la première journée de votre long week-end ? Aujourd’hui, je veux partager avec vous des concepts sur différents modes de rendu web : SSG, SSR, CSR et ISR. Ils se ressemblent mais ont des détails différents. Avant de décider lequel utiliser, jetons un coup d’œil aux introductions ci-dessous !
Static Site Generation (SSG)
SSG, ou génération statique (Static Generation), signifie générer des fichiers HTML lors de la construction (build) de l’ensemble du projet. Ces fichiers HTML contiennent déjà les données nécessaires à l’affichage. Ce mode de rendu est un type de pré-rendu (pre-rendering). Le SSG est très adapté aux sites web statiques où le contenu ne change pas, car toutes les données sont obtenues au moment de la construction. Ces fichiers HTML peuvent être placés sur un CDN et mis en cache pour améliorer les performances du site web. En plus de cela, l’adoption du mode de rendu SSG est également bénéfique pour le SEO.
Server-side Rendering (SSR)
SSR, ou rendu côté serveur (Server-side Rendering), signifie que chaque fois que le navigateur (côté client) envoie une requête (request), le serveur génère le fichier HTML et le renvoie au navigateur pour affichage. Ce mode de rendu est très adapté aux données qui changent fréquemment. Cependant, comme le serveur prend du temps pour générer le fichier HTML, le temps de réponse du site web sera plus long et les utilisateurs verront un écran blanc en attendant. Le SSR est également considéré comme un type de pré-rendu, il est donc assez favorable au SEO~ Mais il faut noter que cette méthode nécessite que le serveur traite constamment les requêtes des utilisateurs.
Client-side Rendering (CSR)
CSR, ou rendu côté client (Client-side Rendering), implique à peu près ce que son nom indique. Le fichier HTML envoyé par le serveur au navigateur peut être considéré comme sans contenu. Le navigateur ne peut effectuer le rendu à l’écran qu’après avoir récupéré les données du serveur. Le mode de rendu utilisé par les SPA (Single Page Application comme React ou Vue) est le CSR. Le plus grand avantage de ce mode est qu’il n’est pas nécessaire de récupérer à nouveau les fichiers du serveur lors du changement de page, de sorte que les utilisateurs ne verront pas d’écran blanc, ce qui est considéré comme une très bonne expérience utilisateur. Cependant, le temps de rendu dépendra de l’environnement du client, et grâce à cela, la charge sur le serveur est considérablement réduite.
Incremental Static Regeneration (ISR)
ISR, ou régénération statique incrémentielle (Incremental Static Regeneration), est un mode de rendu dont on entend moins parler, et est également considéré comme un type de pré-rendu. ISR génère tous (ou une partie des) fichiers HTML lors de la construction du projet. Lorsqu’il y a une nouvelle requête et qu’un temps prédéterminé s’est écoulé, le serveur fournira d’abord au navigateur l’ancien fichier tout en régénérant le fichier le plus récent en arrière-plan, puis l’enverra au navigateur pour affichage une fois la génération terminée. Si un utilisateur accède à une page qui n’a pas encore été générée (generate), le serveur générera le fichier sur place et le mettra en cache, de sorte que le prochain utilisateur sur cette page pourra directement obtenir le fichier à partir du cache. L’ISR est très similaire au SSG, mais il résout le problème selon lequel le SSG ne peut pas mettre à jour le contenu des données, et les fichiers HTML seront également mis en cache sur le CDN, ce qui réduit également la charge sur le serveur par rapport au SSR.
Lequel devriez-vous utiliser ?
Chaque mode de rendu a ses avantages et ses inconvénients, et le choix dépend de notre projet. Il n’y a pas de vainqueur clair.
- Les tableaux de bord de systèmes internes où les données changent constamment et où le SEO n’est pas nécessaire sont très adaptés à l’utilisation du CSR.
- Si le taux de changement des données n’est pas faible mais que le SEO est nécessaire, vous pouvez envisager d’utiliser le SSR.
- Si les données ont rarement besoin d’être mises à jour, comme pour les sites d’événements ou de marketing, et que le SEO est également important, l’utilisation du SSG est très appropriée.
- Si les données n’ont pas besoin d’être mises à jour souvent ou s’il y a trop de pages et que le SEO est nécessaire, comme les pages de produits, alors l’ISR est un bon choix.
J’ai aussi dessiné un tableau (en anglais XD), jetez-y un œil~
Pre-render dans Next.js
Next.js prend en charge de manière native les modes de rendu mentionnés ci-dessus, et utilise également par défaut le SSG pour rendre les pages web qui n’ont pas besoin de récupérer (fetch) de données. Si vous avez besoin de récupérer des données du serveur, cela sera mélangé avec le CSR (hybride). Si vous souhaitez utiliser d’autres modes de rendu, vous pouvez utiliser les fonctions suivantes fournies par Next.js :
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Récupère les données nécessaires au moment de la construction et les place dans le fichier HTML |
| getStaticPaths (Static Generation) | Décide quelles routes dynamiques (dynamic) doivent être générées sous forme de fichiers HTML au moment de la construction |
| getServerSideProps (Server-side Rendering) | Une fonction qui s’exécute chaque fois que le navigateur envoie une requête pour obtenir les données nécessaires |
Conclusion
C’est tout pour aujourd’hui, continuons demain~ Demain, je partagerai avec vous comment utiliser ces trois fonctions pour implémenter des sites web avec différents modes de rendu ! Que pensez-vous des modes de rendu appris aujourd’hui ?