Les développeurs web modernes ne manquent pas de bibliothèques et de frameworks JavaScript. L’une des bibliothèques les plus omniprésentes est React, que Facebook (maintenant Meta) a créée pour aider à construire des applications riches en fonctionnalités. Les applications React s’exécutent traditionnellement dans les navigateurs web, mais le framework Next.js étend la fonctionnalité React au côté serveur par le biais de l’environnement d’exécution JavaScript Node.js.
Dans cet article, nous allons examiner Next.js et React afin que vous puissiez décider s’ils conviennent à votre prochain projet.
Next.js et React : JavaScript au niveau supérieur
Une enquête SlashData de 2022 a révélé qu’il y a plus de 17 millions de programmeurs JavaScript dans le monde, en tête d’un peloton qui comprend des langages populaires comme Python et Java. JavaScript peut être utilisé à la fois du côté client et du côté serveur, et cette polyvalence permet aux développeurs de créer des applications complètes à l’aide d’un seul langage de programmation.
L’introduction de bibliothèques JavaScript comme React et de frameworks comme Next.js a encore renforcé ce développement. Ces bibliothèques et frameworks offrent des fonctionnalités qui simplifient l’intégration du frontend et du backend. En outre, les développeurs peuvent étendre les capacités de JavaScript en utilisant des gestionnaires de paquets comme npm (le gestionnaire de paquets Node.js) pour installer des bibliothèques et des outils JavaScript. Ces ressources fournissent des fonctionnalités sophistiquées qui réduisent la quantité de code que vous devez écrire vous-même.
L’extensibilité de JavaScript signifie qu’une connaissance approfondie de ses outils les plus courants est la clé de votre réussite en tant que développeur web.
Qu’est-ce que Next.js ?
Initialement publié en 2016 par Vercel, Next.js est un framework React open source qui fournit les blocs de construction permettant de créer des applications web performantes. De grandes entreprises l’ont depuis adopté, notamment Twitch, TikTok et Uber, pour n’en citer que quelques-unes.
Next.js offre l’une des meilleures expériences de développeur pour créer des applications rapides et adaptées au référencement. Vous trouverez ci-dessous quelques caractéristiques de Next.js qui en font un framework de production exceptionnel :
- Capacités de rendu hybride
- Fractionnement automatique du code
- Optimisation des images
- Prise en charge intégrée des préprocesseurs CSS et des bibliothèques CSS-in-JS
- Routage intégré
Ces fonctionnalités permettent aux développeurs Next.js de gagner un temps considérable sur la configuration et l’outillage. Vous pouvez passer directement à la construction de votre application, qui pourrait prendre en charge des projets tels que les suivants :
- Magasins de commerce électronique
- Blogs
- Tableaux de bord
- Applications à page unique
- Interfaces utilisateur d’interaction
- Sites web statiques
Qu’est-ce que React ?
React est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur dynamiques. En plus de créer des interfaces web, vous pouvez construire des applications mobiles en utilisant React Native.
Voici quelques avantages de l’utilisation de React :
- Des performances améliorées : Au lieu de mettre à jour chaque composant dans le DOM, React utilise un DOM virtuel pour mettre à jour uniquement les composants modifiés.
- Fortement basé sur les composants : Une fois que vous avez créé un composant, vous pouvez le réutiliser à plusieurs reprises.
- Débogage facile : Les applications React utilisent un flux de données unidirectionnel – des composants parents aux composants enfants uniquement.
Next.js vs React
Bien que les développeurs utilisent souvent Next.js et React dans le même but, il existe quelques différences fondamentales entre les deux.
Facilité d’utilisation
Il est facile de démarrer avec Next.js et React. Chacun d’entre eux nécessite l’exécution de commandes uniques dans votre terminal à l’aide de npx, qui fait partie de npm pour Node.js.
Pour Next.js, la commande la plus simple est :
npx create-next-appSans arguments supplémentaires pour create-next-app, l’installation se déroulera en mode interactif. Il vous sera demandé un nom de projet (qui sera utilisé pour le répertoire du projet), et si vous souhaitez inclure la prise en charge de TypeScript et du linter de code ESLint.
Cela ressemblera à quelque chose comme ceci :
Lors de l’initialisation d’une instance React, la commande la plus simple inclut un nom pour le répertoire du projet :
npx create-react-app new-appCela génère un dossier contenant toutes les configurations initiales et dépendances nécessaires :
Bien que ces deux méthodes permettent de commencer facilement, n’oubliez pas que Next.js est construit au-dessus de React. Vous ne pouvez donc pas apprendre Next.js sans d’abord apprendre React et comprendre son fonctionnement. Heureusement, React offre une courbe d’apprentissage douce et est idéal pour les débutants.
Il est également important de noter que React est relativement peu structuré. Vous devez installer et configurer un routeur React et décider comment gérer la récupération des données, l’optimisation des images et le fractionnement du code. Cette configuration vous oblige à installer et à configurer des bibliothèques et des outils supplémentaires.
En revanche, Next.js est livré avec ces outils préinstallés et pré-configurés. Avec Next.js, tout fichier ajouté au dossier pages sert automatiquement d’itinéraire. Grâce à cette prise en charge intégrée, Next.js est plus facile à utiliser au quotidien, ce qui vous permet de commencer immédiatement à coder la logique de votre application.
Next.js et les fonctionnalités de React
Comme Next.js est basé sur React, les deux partagent certaines fonctionnalités. Cependant, Next.js va un peu plus loin et inclut des fonctionnalités supplémentaires telles que le routage, le fractionnement du code, le pré-rendu et la prise en charge des API dès la sortie de l’emballage. Ce sont des fonctionnalités que vous devrez configurer vous-même lorsque vous utilisez React.
Récupération de données
React rend les données du côté client. Le serveur envoie des fichiers statiques au navigateur, puis ce dernier va chercher les données dans les API pour alimenter l’application. Ce processus réduit les performances de l’application et offre une mauvaise expérience utilisateur puisque l’application se charge lentement. Next.js résout ce problème grâce au pré-rendu.
Avec le pré-rendu, le serveur effectue les appels d’API nécessaires et récupère les données avant d’envoyer l’application au navigateur. Ainsi, le navigateur reçoit des pages web prêtes à être rendues.
Le pré-rendu peut faire référence à la génération de sites statiques (SSG) ou au rendu côté serveur (SSR). Dans la SSG, les pages HTML sont générées au moment de la construction et réutilisées pour de multiples requêtes. Next.js peut générer des pages HTML avec ou sans données.
Vous trouverez ci-dessous un exemple de la façon dont Next.js génère des pages sans données :
function App() {
return <div>Welcome</div>
}
export default AppPour les pages statiques qui consomment des données externes, utilisez la fonction getStaticProps(). Une fois que vous exportez getStaticProps() d’une page, Next.js effectuera un pré-rendu de la page en utilisant les props qu’elle renvoie. Cette fonction s’exécute toujours sur le serveur, utilisez donc getStaticProps() lorsque les données que la page utilise sont disponibles au moment de la construction. Par exemple, vous pouvez l’utiliser pour récupérer des articles de blog à partir d’un CMS.
const Posts= ({ posts }) => {
return (
<div className={styles.container}>
{posts.map((post, index) => (
// render each post
))}
</div>
);
};
export const getStaticProps = async () => {
const posts = getAllPosts();
return {
props: { posts },
};
};Dans les situations où les chemins de la page dépendent de données externes, utilisez la fonction getStaticPaths(). Ainsi, pour créer un chemin basé sur l’ID de l’article, exportez le getStaticPaths() de la page.
Par exemple, vous pourriez exporter getStaticPaths() à partir de pages/posts/[id].js comme indiqué ci-dessous.
export getStaticPaths = async() => {
// Get all the posts
const posts = await getAllPosts()
// Get the paths you want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
return { paths, fallback: false }
}getStaticPaths() est souvent associé à getStaticProps(). Dans cet exemple, vous utiliseriez getStaticProps() pour récupérer les détails de l’ID dans le chemin.
export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.id);
return {
props: { post }
};
};Dans SSR, les données sont récupérées au moment demandé et envoyées au navigateur. Pour utiliser SSR, exportez la fonction props getServerSide() de la page que vous souhaitez rendre. Le serveur appelle cette fonction à chaque requête, ce qui rend SSR utile pour les pages qui consomment des données dynamiques.
Par exemple, vous pouvez l’utiliser pour récupérer des données à partir d’une API de nouvelles.
const News = ({ data }) => {
return (
// render data
);
};
export async function getServerSideProps() {
const res = await fetch(`https://app-url/data`)
const data = await res.json()
return { props: { data } }
}Les données sont récupérées à chaque requête et transmises au composant News via des props.
Division du code
Le fractionnement du code consiste à diviser le code en morceaux que le navigateur peut charger à la demande. Il réduit la quantité de code envoyée au navigateur lors du chargement initial, car le serveur n’envoie que ce dont l’utilisateur a besoin. Des bundlers comme Webpack, Rollup et Browserify prennent en charge le fractionnement du code dans React.
Next.js prend en charge le fractionnement du code dès le départ.
Avec Next.js, chaque page est divisée en code, et l’ajout de pages à l’application n’augmente pas la taille du bundle. Next.js prend également en charge les importations dynamiques, ce qui vous permet d’importer des modules JavaScript et de les charger dynamiquement pendant l’exécution. Les importations dynamiques contribuent à accélérer la vitesse des pages car les paquets sont chargés paresseusement.
Par exemple, dans le composant Home ci-dessous, le serveur n’inclura pas le composant hero dans le bundle initial.
const DynamicHero = dynamic(() => import('../components/Hero'), {
suspense: true,
})
export default function Home() {
return (
<Suspense fallback={`Loading...`}>
<DynamicHero />
</Suspense>
)
}Au lieu de cela, l’élément de repli du suspense sera rendu avant le chargement du composant héros.
Support API dans Next.js vs React
La fonction de routage API de Next.js vous permet d’écrire du code backend et frontend dans la même base de code. Toute page enregistrée dans le dossier /pages/api/ est mappée à la route /api/*, et Next.js la traite comme un point de terminaison d’API.
Par exemple, vous pouvez créer une route API pages/api/user.js qui renvoie le nom de l’utilisateur actuel comme ceci :
export default function user(req, res) {
res.status(200).json({ username: 'Jane' });
}Si vous visitez l’URL https://app-url/api/user, vous verrez l’objet nom d’utilisateur.
{
username: 'Jane'
}Les routes API sont utiles lorsque vous voulez masquer l’URL d’un service auquel vous accédez ou lorsque vous voulez garder secrètes des variables d’environnement sans coder une application backend entière.
Performances
Next.js est sans aucun doute supérieur dans sa capacité à créer des applications plus performantes avec un processus simplifié. Les applications SSR et SSG Next.js sont plus performantes que les applications React à rendu côté client (CSR). En récupérant les données sur le serveur et en envoyant tout ce dont le navigateur a besoin pour effectuer le rendu, Next.js élimine la nécessité d’une demande de récupération de données aux API. Cela signifie des temps de chargement plus rapides.
En outre, Next.js prend en charge le routage côté client. Le navigateur ne doit pas aller chercher des données sur le serveur chaque fois qu’un utilisateur navigue vers un autre itinéraire. En outre, le composant image de Next.js permet l’optimisation automatique des images. Les images ne se chargent que lorsqu’elles entrent dans le viewport. Dans la mesure du possible, Next.js sert également les images dans des formats modernes comme WebP.
Next.js propose également des optimisations des polices de caractères, la pré-extraction intelligente des routes et des optimisations du regroupement. Ces optimisations ne sont pas automatiquement disponibles dans React.
Support
Comme React existe depuis plus longtemps que Next.js, il dispose d’une communauté plus étendue. Toutefois, de nombreux développeurs React adoptent Next.js, de sorte que cette communauté ne cesse de croitre. Les développeurs trouvent plus facilement des solutions existantes aux problèmes qu’ils rencontrent plutôt que de devoir construire des solutions à partir de zéro.
Next.js propose également une excellente documentation avec des exemples complets et faciles à comprendre. Malgré sa popularité, la documentation de React n’est pas aussi facile à consulter.
Résumé
Le choix de Next.js ou de React se résume aux exigences d’une application.
Next.js améliore les capacités de React en fournissant une structure et des outils qui améliorent les performances. Ces outils, comme le routage, le fractionnement du code et l’optimisation des images, sont intégrés à Next.js, ce qui signifie que les développeurs n’ont pas à configurer quoi que ce soit manuellement. Grâce à ces fonctionnalités, Next.js est facile à utiliser et les développeurs peuvent commencer à coder la logique métier immédiatement.
En raison des différentes options de rendu, Next.js convient aux applications avec rendu côté serveur ou aux applications qui combinent la génération statique et le rendu côté serveur de Node.js. De plus, grâce à la fonction d’optimisation fournie par Next.js, il est parfait pour les sites qui doivent être rapides, comme les boutiques de commerce électronique.
React est une bibliothèque JavaScript qui peut vous aider à créer et à faire évoluer des applications frontend robustes. Sa syntaxe est également simple, en particulier pour les développeurs ayant des connaissances en JavaScript. En outre, vous avez le contrôle sur les outils que vous utilisez dans votre application et sur la façon dont vous les configurez.
Vous planifiez votre propre application qui dominera le monde ? Découvrez l’approche de Kinsta en matière d’hébergement d’applications Node.js pour les services prenant en charge React et Next.js.
Laisser un commentaire