Agence Immobilière

Contexte

Cette application est un projet réalisée dans le cadre de ma formation dispensée sur Udemy intitulé " React - Maitriser le rendu coté serveur avec Next.js". Elle a permis aux participants de mettre en pratique tout ce qu'ils ont appris tout au long de la formation.

Défis et Développement

React est l'un des frameworks javascript le plus utilisé dans le monde. les développeurs front-end l'utilisent pour développer leurs applications. Souvent ils sont confrontés aux différents problèmes lorsqu'ils veulent développer des applications capable d'être indexée par les moteurs de recherche.

En effet React utilise le rendu côté client comme tous les autres SPA (Single page Application) telles que Vue.js, Angular ou Svelte, c.à.d Le navigateur va d'abord télécharger tous le javascript ensuite l'exécuter et après la page devient visible. cela comporte des inconvénients

Le temps de chargement initial sera plus long car le navigateur va d'abord télécharger ensuite exécuter le js.
Difficulté de référencer une application car les robots des moteurs de recherche n'ont pas accès au html de la page car elle est exécutée côté client

Pour remédier à ce problème avec React, nous utilisons le rendu côté serveur avec un serveur Node.js, mais cela implique aussi des configurations souvent très rebutantes pour les débutants :

Le développeur doit :

configurer Webpack
configurer babel
configurer le code splitting (partitionnement du code)
gérer la minification du code
hydrater les routes etc...

il y a plusieurs configurations et modifications à faire pour implémenter le rendu côté serveur et pour un développeur peu expérimenté cela peut être éprouvant et il n'est pas aussi conseillé d'implémenter le rendu côté serveur tout seul mais d'utiliser des solutions existantes pour pallier à ce problème.

C'est la qu'intervient Next.js qui permet de faire en outre du rendu côté serveur, la génération statique. la génération statique permet de générer toutes les pages en construction, ce qui rendra l'application plus rapide car les données sont déjà disponibles et pas besoin de faire une requête pour récupérer les données.

Next.js offre la possibilité d'utiliser :

Le rendu côté serveur (Contenu indexable par les moteurs de recherche)
La génération statique ( Contenu indexable par les moteurs de recherche)
La génération statique avec incrémentation (Contenu indexable par les moteurs de recherche)
Le rendu côté client (contenu difficilement indexable par les moteurs de recherche)

Conclusion

Pour résumé avec Next.js vous pouvez utiliser le rendu côté client pour le dashboard ou les pages privées, le rendu côté serveur pour le contenu des pages qui changent souvent, la génération statique pour les pages statiques et la generation statique avec incrémentation pour les pages dont le contenu changent occasionnellement

Elle a été déployée sur Vercel