Introduction : amélioration de Next.js avec les composants du serveur React

Next.js a évolué pour inclure des fonctionnalités puissantes telles que les composants React Server et les actions serveur, qui offrent une nouvelle façon de gérer le rendu et la logique côté serveur. Ces fonctionnalités offrent une approche plus efficace et rationalisée de la création d'applications Web, vous permettant de récupérer des données et de restituer des composants sur le serveur sans compromettre les performances.

Dans cet article de blog, nous explorerons comment utiliser les composants React Server et les actions serveur dans Next.js avec des exemples pratiques et des extraits de code.

Que sont les composants du serveur React ?

Les composants React Server (RSC) sont un nouveau type de composant introduit par React qui vous permet de restituer des composants sur le serveur. Cette approche permet de réduire la quantité de JavaScript envoyée au client et d'améliorer les performances en déchargeant le travail de rendu sur le serveur.

Avantages des composants du serveur React

• Performances améliorées : en effectuant le rendu sur le serveur, vous réduisez la quantité de JavaScript côté client et améliorez les temps de chargement.
• Expérience utilisateur améliorée : chargements initiaux de pages plus rapides et interactions plus fluides.
• Récupération de données simplifiée : récupérez les données sur le serveur et transmettez-les directement aux composants.

Exemple : création d'un composant serveur

Voici un exemple de base d'un composant React Server dans une application Next.js :

// app/components/UserProfile.server.js
import { getUserData } from "../lib/api";

export default async function UserProfile() {
  const user = await getUserData();

  return (
    

      
{user.name}
      
{user.email}
    
  );
}

Dans cet exemple, UserProfile est un composant serveur qui récupère les données utilisateur sur le serveur et les restitue.

Que sont les actions du serveur ?

Les actions du serveur sont des fonctions qui s'exécutent sur le serveur en réponse aux interactions de l'utilisateur ou à d'autres événements. Ils vous permettent de gérer la logique côté serveur, telle que les soumissions de formulaires ou les requêtes API, directement à partir de vos composants React.

Avantages des actions du serveur

• Logique serveur simplifiée : écrivez du code côté serveur directement dans vos composants.
• Sécurité améliorée : gérez les opérations sensibles sur le serveur plutôt que sur le client.
• Performances améliorées : réduisez le code JavaScript côté client et déchargez les tâches sur le serveur.

Exemple : utilisation des actions du serveur

Voici comment utiliser les actions du serveur dans une application Next.js pour gérer les soumissions de formulaires :

// app/actions/submitForm.js
import { saveFormData } from "../lib/api";

export async function submitForm(data) {
  await saveFormData(data);
  return { success: true };
}

// app/components/ContactForm.js
"use client";

import { submitForm } from "../actions/submitForm";

export default function ContactForm() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await submitForm(Object.fromEntries(formData));
    if (result.success) {
      alert("Form submitted successfully!");
    }
  };

  return (
    

Dans cet exemple, submitForm est une action serveur qui traite les données de formulaire sur le serveur, et ContactForm est un composant client qui utilise cette action pour gérer les soumissions de formulaire.

Conclusion : tirer parti des fonctionnalités modernes pour de meilleures applications Web

Les composants React Server et les actions serveur dans Next.js fournissent des outils puissants pour créer des applications Web efficaces et modernes. En tirant parti de ces fonctionnalités, vous pouvez améliorer les performances, simplifier la logique côté serveur et créer une expérience utilisateur plus réactive.

Lorsque vous créez vos applications Next.js, envisagez d'incorporer des composants React Server et des actions serveur pour tirer pleinement parti des dernières avancées en matière de développement Web.

Bon codage !

?✨