Historique utilisateur et UI optimiste

Contexte et enjeux

Dans ce module, nous allons enrichir notre application Next.js 15 avec une fonctionnalité essentielle : la gestion de l’historique de visionnage et une expérience utilisateur réactive grâce à l’UI optimiste. Après avoir mis en place l’affichage de films et de séries, nous souhaitons maintenant permettre à chaque utilisateur de :

• Ajouter un film ou une série à son historique.
• Visualiser son historique en mode agrégé (par date et par année).
• Supprimer un élément de son historique, instantanément, sans temps mort.

En combinant React Server Components, Server Actions et Prisma, nous garantissons une synchronisation robuste entre le client et le serveur, tout en offrant une interface fluide qui réagit immédiatement aux interactions de l’utilisateur.

Pourquoi l’UI optimiste ?

Traditionnellement, lorsqu’on effectue une mutation côté serveur (par exemple, supprimer un élément), l’interface attend la réponse avant de mettre à jour l’affichage. Avec l’UI optimiste, on :

1. Applique d’abord la modification côté client (suppression visuelle immédiate).
2. Lance la mutation serveur en arrière-plan.
3. En cas de succès, rien ne change, l’interface était déjà à jour.
4. En cas d’échec, on peut restaurer l’état précédent ou afficher un message d’erreur.

Cette technique améliore la réactivité perçue et réduit la latence ressentie par l’utilisateur.

Aperçu technique

Schéma Prisma

Nous ajouterons un modèle HistoryItem dans schema.prisma :

• id (autoincrémenté)
• lien vers l’utilisateur (userId)
• movieId ou serieId
• createdAt par défaut à la date d’insertion

Server Actions

• addHistoryItem pour créer un nouvel enregistrement.
• removeHistoryItem pour supprimer un élément, puis revalidatePath('/history') afin de rafraîchir la page History.

React Server Components et Client Components

• La page /history sera un RSC qui appelle getHistory via Prisma.
• Le composant <HistoryList /> (Client) utilisera useOptimistic pour gérer localement la liste et useTransition pour le feedback de suppression.

Ce que vous allez maîtriser

• Configurer et migrer un nouveau modèle Prisma pour l’historique.
• Créer et sécuriser des Server Actions avec authentification.
• Mettre en œuvre une interface optimiste avec React (useOptimistic, useTransition).
• Organiser votre code en Server Components et Client Components pour un rendu full-stack performant.

Nous plongeons désormais dans la mise en place étape par étape de cette fonctionnalité clé, alliant Prisma, Next.js 15 et UX optimiste.