Maison > Article > interface Web > Utilisation des composants du serveur React et des actions du serveur dans Next.js
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.
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.
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 ( <div> <h1>{user.name}</h1> <p>{user.email}</p> </div> ); }
Dans cet exemple, UserProfile est un composant serveur qui récupère les données utilisateur sur le serveur et les restitue.
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.
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 ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" name="name" required /> </label> <label> Email: <input type="email" name="email" required /> </label> <button type="submit">Submit</button> </form> ); }
Dans cet exemple, submitForm est une action serveur qui traite les données du formulaire sur le serveur, et ContactForm est un composant client qui utilise cette action pour gérer les soumissions de formulaire.
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, pensez à intégrer 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 !
?✨
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!