React 20 يقدم تغييرات جذرية في كيفية بناء تطبيقات الويب. Server Components لم تعد مجرد ميزة اختبارية بل أصبحت الطريقة الأساسية لبناء التطبيقات. في هذا الدليل، نشرح كيفية المهاجرة خطوة بخطوة.
Server Components — ما الجديد؟
الكونمпонتات الخادمية تعمل على السيرفر وتقلل حجم JavaScript المرسل للمتصفح بشكل كبير. في اختبارنا، انخفض حجم Bundle بنسبة 40% بعد التحويل.
UserProfile.tsx
// Server Component — runs on the server
async function UserProfile({ userId }: { userId: string }) {
// Direct database access — no API needed!
const user = await db.user.findUnique({
where: { id: userId },
include: { posts: true, comments: true }
});
async function UserProfile({ userId }: { userId: string }) {
// Direct database access — no API needed!
const user = await db.user.findUnique({
where: { id: userId },
include: { posts: true, comments: true }
});
return (
<div className=“profile”>
<h1>{user.name}</h1>
<p>{user.email}</p>
<PostList posts={user.posts} />
</div>
);
}
خطوات المهاجرة
- حدّث React و Next.js: `npm install react@20 next@15`
- حدد الكونمпонتات الخادمية: أي كونمпонت يحتاج للسيرفر فقط
- حوّل الكونمpeonتات التفاعلية: أضف `use client` للony necessary
- حسّن البيانات: استخدم Server Actions بدل API Routes
- اختبر: تأكد من أن كل شيء يعمل بشكل صحيح
⚠️
تحذير مهم
لا تحول جميع الكونمпонتات دفعة واحدة. ابدأ بالكونمponنات البسيطة وتأكد من عملها قبل التحويل.
0 تعليق