Retour • 21/11/2024

React en front-end ou back-end ?

Écris par Melvyn Malherbe le 21/11/2024

React est une librairie web qui a été créée par Facebook principalement pour créer des interfaces complexes côté front-end. Mais depuis l'arrivée de meta-framework comme NextJS on peut se demander si c'est toujours une librairie front-end ou si au contraire c'est devenu une librairie back-end.

Pourquoi React est front-end ?

Alors il faut bien définir ce qu'est le front-end. C'est tout ce qui va être envoyé et exécuté côté client.

Le useState par exemple permet de gérer les états locaux de ton application, on ne parle pas de serveur ici mais vraiment de données locales c'est pour cette raison que c'est vraiment "front-end".

Mais est-il possible d'utiliser React pour faire du back-end ?

NextJS change tout

NextJS est arrivé en proposant clairement un moyen de faire du back-end avec React. Comment ? À l'époque c'était d'utiliser des méthodes getServerSideProps ou getStaticProps qui permettent de récupérer des données directement côté serveur puis de les injecter dans nos composants HTML. Si tu veux en savoir plus tu peux regarder ma formation NextJS.

Mais récemment, NextJS ou Vercel a travaillé avec l'équipe de React et ont fait une énorme nouveauté : du backend par défaut dans React.

Back-end avec React

Le fameux "use server" ou les Server Components ont été ajoutés dans React et comme leur nom l'indique, ils permettent de faire des choses côté serveur et pas côté client.

Ce qui change tout et ouvre la voie à vraiment faire du fullstack avec React. Voici typiquement un exemple de todo list qui fonctionne avec React 100% en backend :

TSX

import { revalidatePath } from "next/cache";
import { prisma } from "@/lib/prisma";

export default async function TodoList() {
  const todos = await prisma.todo.findMany();

  const addTodo = async (formData: FormData) => {
    "use server";
    const name = formData.get("name");
    await prisma.todo.create({ data: { name } });
    revalidatePath("/");
  };

  return (
    <div>
      <form action={addTodo}>
        <input type="text" name="name" />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

Ce code :

utilise un server component pour récupérer les todos et les afficher 100% côté serveur
utilise une server action pour modifier les todos
utilise une méthode NextJS (revalidatePath) pour revalider la page et récupérer les nouvelles données

Ce code, mis à part le revalidatePath est 100% géré côté React. Ce n'est pas de la magie de NextJS comme à l'époque mais bien la magie de React utilisable par d'autres librairies.

La team React a travaillé sur une API disponible pour faire du backend avec React.

React back-end ou front-end ?

React est principalement une librairie front-end, c'est-à-dire que si tu n'utilises que ces fonctionnalités backend tu ne vas pas vraiment profiter de tout ce que peut proposer React. Cependant, maintenant on peut dire que React est devenu une librairie fullstack.

On est loin de l'époque où on injectait du React dans des pages PHP ou Ruby pour ajouter des modals.

Maintenant on utilise des frameworks construits autour de React comme NextJS pour créer des applications complètes et full-stack.

Conclusion

Apprendre React est devenu plus essentiel que jamais et permet de créer des applications complètes que ce soit côté front-end ou back-end. NextJS est aussi un bon moyen de commencer en apprenant NextJS.