Rumah > Artikel > hujung hadapan web > Menggunakan Komponen Pelayan React dan Tindakan Pelayan dalam Next.js
Next.js telah berkembang untuk memasukkan ciri berkuasa seperti Komponen Pelayan Bertindak balas dan Tindakan Pelayan, yang menawarkan cara baharu untuk mengendalikan pemaparan dan logik bahagian pelayan. Ciri ini menyediakan pendekatan yang lebih cekap dan diperkemas untuk membina aplikasi web, membolehkan anda mengambil data dan membuat komponen pada pelayan tanpa menjejaskan prestasi.
Dalam catatan blog ini, kami akan meneroka cara menggunakan Komponen Pelayan Bertindak balas dan Tindakan Pelayan dalam Next.js dengan contoh praktikal dan coretan kod.
Komponen Pelayan React (RSC) ialah jenis komponen baharu yang diperkenalkan oleh React yang membolehkan anda membuat komponen pada pelayan. Pendekatan ini membantu mengurangkan jumlah JavaScript yang dihantar kepada pelanggan dan meningkatkan prestasi dengan memunggah kerja pemaparan ke pelayan.
Berikut ialah contoh asas Komponen Pelayan React dalam aplikasi 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> ); }
Dalam contoh ini, UserProfile ialah komponen pelayan yang mengambil data pengguna pada pelayan dan menjadikannya.
Tindakan Pelayan ialah fungsi yang dijalankan pada pelayan sebagai tindak balas kepada interaksi pengguna atau acara lain. Ia membenarkan anda mengendalikan logik sebelah pelayan, seperti penyerahan borang atau permintaan API, terus daripada komponen React anda.
Begini cara anda boleh menggunakan Tindakan Pelayan dalam aplikasi Next.js untuk mengendalikan penyerahan borang:
// 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> ); }
Dalam contoh ini, submitForm ialah tindakan pelayan yang memproses data borang pada pelayan dan ContactForm ialah komponen klien yang menggunakan tindakan ini untuk mengendalikan penyerahan borang.
Komponen Pelayan Bertindak Balas dan Tindakan Pelayan dalam Next.js menyediakan alatan berkuasa untuk membina aplikasi web moden yang cekap. Dengan memanfaatkan ciri ini, anda boleh meningkatkan prestasi, memudahkan logik bahagian pelayan dan mencipta pengalaman pengguna yang lebih responsif.
Semasa anda membina aplikasi Next.js anda, pertimbangkan untuk menggabungkan Komponen Pelayan React dan Tindakan Pelayan untuk memanfaatkan sepenuhnya kemajuan terkini dalam pembangunan web.
Selamat mengekod!
?✨
Atas ialah kandungan terperinci Menggunakan Komponen Pelayan React dan Tindakan Pelayan dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!