L’art du rendu conditionnel : conseils et astuces pour les développeurs React et Next.js

Le rendu conditionnel est une technique utilisée dans les applications web pour afficher sélectivement un composant parmi plusieurs possibilités, en fonction d’une condition, comme l’état d’authentification ou les privilèges de l’utilisateur, ou encore l’état de l’application. Il permet également de mettre en œuvre de nombreux concepts fondamentaux de l’interface utilisateur React, comme le routage côté client et le chargement différé.

Dans cet article, vous découvrirez les avantages du rendu conditionnel, ses différences avec le routage conditionnel et comment mettre en œuvre les deux avec React, Next.js et Remix.

Les avantages du rendu conditionnel dans React

Dans les applications créées avec React ou des frameworks similaires, le rendu conditionnel présente de nombreux avantages, notamment des temps de chargement plus courts.

Le temps de chargement d’une application web dépend de la taille du Document Object Model (DOM) de la page chargée. La présence d’un trop grand nombre d’éléments, en particulier ceux qui ne s’affichent que lorsque l’utilisateur fait défiler la page, peut entraîner une taille de DOM inutilement importante et nuire aux performances de votre application.

Dans ce cas, le chargement différé, une technique courante qui consiste à différer le chargement des ressources jusqu’à ce qu’elles soient nécessaires, permet de retarder le rendu d’un composant jusqu’à ce que l’utilisateur fasse défiler la page et le fasse apparaître dans la fenêtre d’affichage. L’une des bibliothèques de chargement différé les plus populaires pour React, react-lazyload, utilise le rendu conditionnel pour afficher les composants uniquement lorsqu’ils apparaissent dans la fenêtre du navigateur de l’utilisateur, autrement dit lorsqu’ils sont visibles.

Outre les performances, le rendu conditionnel peut également améliorer l’expérience utilisateur. Il vous permet de personnaliser votre interface en fonction des caractéristiques de l’utilisateur, comme son état d’authentification (c.-à-d. afficher un bouton de connexion aux utilisateurs non authentifiés et un bouton de déconnexion aux utilisateurs authentifiés au même endroit à l’écran) et ses privilèges d’accès (c.-à-d. afficher des commandes de modification ou des analyses détaillées aux propriétaires du contenu, comme des tweets, tout en limitant les informations visibles par les autres utilisateurs).

De plus, le rendu conditionnel vous aide à gérer élégamment les opérations côté client, comme la récupération de données et la communication avec le backend. Vous pouvez afficher une barre de chargement pendant une opération ou masquer une liste vide pendant le chargement des données depuis une source distante.

Le rendu conditionnel permet également le routage côté client dans les applications React monopages, notamment avec le package react-router.

En résumé, on peut affirmer sans risque que le rendu conditionnel est l’une des techniques les plus importantes utilisées dans React.

Rendu conditionnel et routage conditionnel

Quand on parle de rendu conditionnel, la question du routage conditionnel revient souvent. Le routage conditionnel ressemble au rendu conditionnel : il détermine ce que l’utilisateur peut voir en fonction de conditions telles que l’utilisateur ou l’état de l’application. Toutefois, au lieu d’afficher ou de supprimer des composants, il redirige l’utilisateur d’une route (ou page) vers une autre. Cette approche est utile pour le contrôle des accès.

Les applications web sont accessibles directement depuis des URL. Cela signifie que les utilisateurs peuvent enregistrer et conserver l’URL d’une page de votre application, qu’elle soit publique ou non. Dans le cas des pages à accès privilégié (pages non publiques réservées aux utilisateurs ayant certains rôles, comme les pages de profil personnel ou de préférences), les URL peuvent être utilisées à mauvais escient pour tenter d’accéder à du contenu protégé.

Grâce au routage conditionnel, une application React peut vérifier si une requête entrante visant à afficher une page dispose des privilèges nécessaires pour accéder à la route. Si ces privilèges ne sont pas détectés, le rendu est refusé et la requête est redirigée vers une autre page. La page de destination demande souvent à l’utilisateur de s’authentifier ou l’informe que l’accès a été refusé.

Pour voir le routage conditionnel en action, ouvrez https://mail.google.com/mail dans une nouvelle fenêtre de navigation privée. Vous serez alors redirigé vers la page de connexion Google. Voilà le routage conditionnel à l’œuvre en coulisses.

Toutefois, le routage conditionnel dans une SPA ne garantit pas la sécurité. Même avant que votre application React monopage ne redirige les utilisateurs non authentifiés, le code JavaScript contient toujours le contenu de la page protégée. Cela peut entraîner des accès non autorisés à des données protégées. Il est donc préférable de mettre en place le routage conditionnel lié à l’authentification côté serveur, avec des frameworks comme Next.js et Remix.

Mettre en œuvre le rendu conditionnel dans React

Maintenant que vous en savez davantage sur le rendu conditionnel, découvrez dans la section suivante comment le mettre en œuvre dans une application React à l’aide d’un concept fondamental de la programmation : l’instruction if…else.

Pour commencer, créez une nouvelle application React en exécutant les commandes suivantes :

1npx create-react-app conditional-rendering-react
2cd conditional-rendering-react
3npm install

Une fois l’application prête, collez le code suivant dans le fichier src/App.js :

1import { useState } from "react"
2
3// Define two components
4const LoginButton = (props) => {
5  return <>
6  <div>You are logged out</div>
7  <div><button onClick={props.toggleLoggedIn}>Log In</button></div>
8  </>
9}
10
11const LogoutButton = (props) => {
12  return <>
13  <div>You are now logged in</div>
14  <div><button onClick={props.toggleLoggedIn}>Log Out</button></div>
15  </>
16}
17
18function App() {
19  // Define a state that the condition will be based upon
20  const [loggedIn, setLoggedIn] = useState(false);
21
22  // Define a function that can change the condition value
23  const toggleLoggedIn = () => {
24    setLoggedIn((currState) => {
25        return !currState;
26    })
27  }
28
29  // Use an if...else statement to render one out of two components based on the login state
30  if (loggedIn)
31    return <LogoutButton toggleLoggedIn={toggleLoggedIn} />
32  else
33    return <LoginButton toggleLoggedIn={toggleLoggedIn} />
34}
35
36export default App;

Ce code comporte des commentaires en ligne qui expliquent la mise en œuvre.

Lancez ensuite l’application à l’aide de la commande suivante :

1npm start

Lorsque vous accédez à l’URL de l’application (c.-à-d. http://localhost:3000), un texte et un bouton s’affichent à l’écran :

Cliquez sur le bouton Log In pour changer l’état et déclencher un nouveau rendu. Vous remarquerez que le texte et le bouton sont remplacés par ceux qui conviennent à un utilisateur connecté :

Et voilà ! Il est très facile de mettre en œuvre le rendu conditionnel dans React. Voyons maintenant comment procéder dans une application Next.js.

Mettre en œuvre le rendu conditionnel et le routage conditionnel dans Next.js

Next.js est un framework open source basé sur React, axé sur la production et proposant des choix de conception affirmés. Il vous aide à créer des applications web très performantes. Lancé par Vercel en 2016, il est depuis devenu l’un des principaux frameworks basés sur React dans le secteur du développement web.

Next.js prend en charge le rendu côté serveur et le rendu statique dès son installation, et propose des solutions faciles à utiliser pour les problèmes courants du développement, comme la récupération de données, le routage et les environnements d’exécution serveur.

Comment mettre en œuvre le rendu conditionnel dans Next.js

La syntaxe JSX étant cohérente entre Next.js et React, vous pouvez appliquer les techniques de rendu conditionnel dans Next.js comme vous le feriez dans React.

Pour commencer avec Next.js, créez une nouvelle application Next.js en exécutant la commande suivante :

1npx create-next-app conditionals-next

Suivez les instructions à l’écran pour créer votre application. Vous pouvez choisir les options par défaut (sauf pour TypeScript, où vous devrez sélectionner No). Une fois le projet créé, collez le code suivant dans le fichier pages/index.js :

1import { useState } from "react";
2
3// Define two components
4const LoginButton = (props) => {
5  return <>
6    <div>You are logged out</div>
7    <div><button onClick={props.toggleLoggedIn}>Log In</button></div>
8  </>
9}
10
11const LogoutButton = (props) => {
12  return <>
13    <div>You are now logged in</div>
14    <div><button onClick={props.toggleLoggedIn}>Log Out</button></div>
15  </>
16}
17
18export default function Home() {
19  // Define a state that the condition will be based upon
20  const [loggedIn, setLoggedIn] = useState(false);
21
22  // Define a function that can change the condition value
23  const toggleLoggedIn = () => {
24    setLoggedIn((currState) => {
25        return !currState;
26    })
27  }
28
29  // Use the ternary conditional operator to render one out of two components based on login state
30  return loggedIn 
31  ? <LogoutButton toggleLoggedIn={toggleLoggedIn} /> 
32  : <LoginButton toggleLoggedIn={toggleLoggedIn} />
33}

Ce code contient des commentaires en ligne qui expliquent chaque étape. Par rapport à l’exemple React, la principale différence est que cet exemple utilise l’opérateur conditionnel ternaire de JavaScript pour choisir l’un des deux composants à afficher. Vous pouvez lancer l’application à l’aide de la commande suivante :

1npm run dev

Une fois l’application démarrée, vous verrez quelque chose comme ceci à l’adresse http://localhost:3000 :

Une fois encore, vous pouvez cliquer sur le bouton Log In pour changer l’état :

Comment mettre en œuvre le routage conditionnel dans Next.js

La mise en œuvre du routage conditionnel dans Next.js 10 et versions ultérieures est également simple. Pour commencer, créez un nouveau fichier profile.js dans votre répertoire conditionals-next/pages, puis collez-y l’extrait de code suivant :

1// This is the profile page
2const Profile = () => {
3  return <div>This is your profile</div>
4}
5
6// This function is called on the server side before the page is rendered
7// Redirecting from this method means that the user will not see the page even for a flash of a second (which often happens in client-side redirection)
8export async function getServerSideProps(context) {
9    const allowAccess = false; // This is usually deduced from the authentication state of the user
10
11    if (!allowAccess) {
12
13        console.log("Redirecting to home...")
14
15        return {
16            redirect: {
17                permanent: false,
18                destination: "/"
19            }
20        }
21    } else
22        return { props: {} }
23}
24
25export default Profile

Relancez ensuite l’application et accédez à http://localhost:3000/profile. Vous serez immédiatement redirigé vers la page d’accueil (c.-à-d. la route /). Consultez le terminal pour voir le journal de redirection :

1# ... other output here
2wait  - compiling...
3event - compiled client and server successfully in 109 ms (199 modules)
4wait  - compiling /profile (client and server)...
5event - compiled client and server successfully in 114 ms (202 modules)
6Redirecting to home...

Si vous définissez allowAccess sur true, vous pourrez afficher la page de profil :

Mettre en œuvre le rendu conditionnel et le routage conditionnel dans Remix

Remix est un autre framework basé sur React, en plein essor, qui permet de créer des applications web axées sur les standards du Web et d’améliorer l’expérience utilisateur. Remix est devenu open source en 2021 et s’est imposé comme un concurrent sérieux de Next.js.

Remix est un framework entièrement rendu côté serveur qui propose des fonctionnalités comme la gestion intégrée des erreurs et des transitions.

Comment mettre en œuvre le rendu conditionnel dans Remix

Remix étant basé sur React, vous pouvez y mettre en œuvre le rendu conditionnel de la même manière que dans React et Next.js.

Pour commencer, créez un nouveau projet Remix en exécutant la commande suivante :

1npx create-remix@latest

Suivez les instructions pour créer votre projet. Veillez à choisir JavaScript plutôt que TypeScript. Une fois le projet créé, collez l’extrait de code suivant dans app/routes/index.jsx :

1import { useState } from "react";
2
3// Define two components
4const LoginButton = (props) => {
5  return <>
6    <div>You are logged out</div>
7    <div><button onClick={props.toggleLoggedIn}>Log In</button></div>
8  </>
9}
10
11const LogoutButton = (props) => {
12  return <>
13    <div>You are now logged in</div>
14    <div><button onClick={props.toggleLoggedIn}>Log Out</button></div>
15  </>
16}
17
18export default function Index() {
19  // Define a state that the condition will be based upon
20  const [loggedIn, setLoggedIn] = useState(false);
21
22  // Define a function that can change the condition value
23  const toggleLoggedIn = () => {
24    setLoggedIn((currState) => {
25        return !currState;
26    })
27  }
28
29  // Use a switch statement to render one of two components based on login state
30  switch(loggedIn) {
31    case true: return <LogoutButton toggleLoggedIn={toggleLoggedIn} />
32    case false: return <LoginButton toggleLoggedIn={toggleLoggedIn} />
33    default: return null
34  }
35}

Cet extrait de code comporte des commentaires en ligne qui expliquent chaque étape. Au lieu d’utiliser une instruction if...else ou un opérateur conditionnel ternaire, cet exemple utilise une instruction switch pour déterminer le composant à afficher.

Comme dans les exemples précédents, voici à quoi ressemblera la page d’accueil à l’adresse http://localhost:3000 :

Comme précédemment, vous pouvez cliquer sur le bouton Log In pour changer l’état :

Comment mettre en œuvre le routage conditionnel dans Remix

Comme pour le routage conditionnel côté serveur mis en place dans Next.js, vous pouvez également le faire dans Remix. Créez un nouveau fichier profile.jsx dans le répertoire conditionals-remix/app/routes, puis collez-y le code suivant :

1import { redirect } from '@remix-run/node'
2
3const Profile = () => {
4    return <div>This is your profile</div>
5}
6
7export const loader = () => {
8    const allowAccess = false; // This is usually deduced from authentication state of the user
9
10    if (!allowAccess) {
11        console.log("Redirecting to home...")
12
13        return redirect('/')
14    }
15
16    return null
17}
18
19export default Profile

Nous utilisons ici une fonction loader plutôt que la fonction getServerSideProps, car Remix prend en charge les loaders pour charger les données des composants pendant leur rendu sur le serveur (ce qui est similaire à ce que peut faire getServerSideProps dans Next.js). De plus, une fonction utilitaire redirect (similaire à la fonction redirect de Next.js) est renvoyée pour lancer une redirection lorsque allowAccess est défini sur false.

Accédez à http://localhost:3000/profile et vous serez, une fois encore, immédiatement redirigé vers la page d’accueil (c.-à-d. la route /). Consultez le terminal pour voir le journal de redirection :

1# ... other output here
2💿 Rebuilding...
3💿 Rebuilt in 100ms
4GET / 200 - - 17.179 ms
5Redirecting to home...        #=== here it is
6GET /profile 302 - - 7.107 ms
7GET / 200 - - 6.564 ms

Si vous définissez allowAccess sur true, vous pourrez afficher la page de profil :

Autres éléments à prendre en compte pour le rendu conditionnel

Lorsque vous utilisez le rendu conditionnel, vous pouvez vous demander quel est son impact sur le DOM virtuel. Les différentes méthodes de rendu conditionnel offrent-elles les mêmes performances ? La création d’un nouveau composant ou d’un composant d’ordre supérieur (HOC) pour masquer les détails du rendu conditionnel a-t-elle un impact sur le DOM de votre application (et ses performances) ? Cette section répond à ces questions.

Rendu conditionnel et JSX

La manière dont vous mettez en œuvre le rendu conditionnel n’a aucun impact sur le DOM ni sur les performances de votre application. Prenons l’exemple suivant :

1if (loggedIn)
2  return <button>Log Out</button>
3else
4  return <button>Log In</button>

Vous pouvez également l’écrire ainsi, avec l’opérateur conditionnel ternaire :

1return <button>{loggedIn ? "Log Out" : "Log In"}</button>

Dans les deux cas, l’un des deux composants (c.-à-d. LoginButton et LogoutButton) est renvoyé par le composant parent et produit exactement la même modification du DOM. Vous pourriez avancer que ces deux expressions peuvent renvoyer des instances différentes de la balise button, mais ce n’est tout simplement pas vrai. En effet, les éléments JSX, comme les boutons et les autres balises, ne sont pas des instances. Ils décrivent simplement, sous forme d’ébauche, la structure HTML finale.

Tant que vous renvoyez les mêmes éléments selon la même structure, l’impact sur le DOM reste identique. Vous pouvez donc librement encapsuler le rendu dans des composants, à condition que la structure JSX reste la même.

Cela peut aussi donner lieu à des situations intéressantes, comme le partage d’un même état entre deux composants de structure identique, dont un seul est rendu conditionnellement au même emplacement dans le DOM. Vous en saurez plus sur le site React, qui montre à quel point un simple opérateur ternaire en JSX peut influer sur le fonctionnement de votre application.

Composants imbriqués et rendu conditionnel

Définir les composants à l’intérieur d’autres composants est considéré comme une anti-pattern. L’une des principales raisons est qu’un composant imbriqué est recréé à chaque nouveau rendu de son composant parent, quelle que soit sa position dans l’arborescence DOM. Ce comportement diffère de celui que vous avez observé précédemment, car la définition du composant imbriqué est recréée à l’exécution lors du nouveau rendu du composant parent. C’est un peu comme si une nouvelle instance de la définition du composant imbriqué était créée, ce qui entraîne ce problème.

Conclusion et ressources complémentaires

À première vue, le rendu conditionnel semble (et est) assez simple. Pourtant, c’est une technique très puissante pour améliorer les performances et l’expérience utilisateur des applications React. Dans cet article, vous avez découvert ses avantages, ses différences avec le routage conditionnel, ainsi que la façon de l’implémenter dans React, Next.js et Remix.

Pour en savoir plus sur le rendu conditionnel et sur la gestion de l’état par React entre les rendus, consultez la nouvelle documentation de React.

Lorsque vous développez des applications React, vous devez souvent sélectionner et installer des packages npm pour ajouter des fonctionnalités, notamment le routage et la gestion de l’état. Snyk Advisor peut vous aider à trouver le package npm adapté à votre projet, tout en respectant des normes de sécurité strictes pour votre application. Découvrez également notre liste de 10 bonnes pratiques de sécurité à suivre lorsque vous travaillez avec React.

Vous pouvez également utiliser Snyk sous forme d’extension IDE pour détecter le code non sécurisé dans les bases de code React et corriger les vulnérabilités de sécurité dans les dépendances open source.