فهم مكونات خادم Next.js 14 وإجراءات الخادم
Understanding Next.js 14 مكونات الخادم وإجراءات الخادم
يقدم Next.js 14 مكونات الخادم وإجراءات الخادم، مما يغير بشكل أساسي كيفية بناء تطبيقات React. دعونا نستكشف هذه الميزات التي ستغير قواعد اللعبة.
ما هي مكونات الخادم ؟
مكونات الخادم هي مكونات React التي تعمل حصريًا على الخادم. لا يرسلون جافا سكريبت أبدًا إلى العميل. ### المزايا:
- جافا سكريبت من جانب العميل ⚡ صفر
- تحميل 🚀 أسرع للصفحة الأولية
- 💾 الوصول المباشر إلى قاعدة البيانات
- 🔒 تعزيز الأمن
- أحجام حزم 📦 أصغر
مكونات الخادم مقابل العميل
مكونات الخادم (افتراضي)
''' jsx // app/products/page.tsx دالة عدم المزامنةProductsPage () { // الوصول المباشر إلى قاعدة البيانات! const products = awaitdb.products.findMany (); return (<div>{products.map (product => <ProductCard key={product.id} {...product} /> ())}</div>); }''### مكونات العميل ''''jsx 'use client '; عداد دالة التصدير (){ const [count, setCount ]= useState(0); return (<button onClick={() =>setCount( count + 1 )}> العدد: {count});</button>} '''## إجراءات الخادم: تتيح لك إجراءات خادم النماذج البسيطة تحوير البيانات مباشرة من الخادم، بدون مسارات واجهة برمجة التطبيقات. '' jsx // app/actions.ts 'use server'; export async function createProduct (formData: FormData ){ const name = formData.get (' name '); const price = formData.get (' price '); await db.products.create ({ data :{ name, price: Number(price)}}); revalidatePath ('/ products '); } '' '' jsx // app/products/new/page.tsx import {createProduct} from '@/ app/actions '; export default function NewProduct (){ return <form action={createProduct}> (<input name=" name "required /> <input name="price" type="number" required /> <button type="submit">Create</button> </form> );}'''## Data Fetching Patterns ### Parallel Data Fetching '''jsx async function Page (){ const [products, categories ]= await Promise.all([getProducts (), getCategories <ProductList products={products} categories={categories} />()]); return ;}'''### Sequential Data Fetching '''jsx async function Page({ params }){ const product = await getProduct (params.id); const relatedProducts = await getRelatedProducts ( product.category<ProductDetail product={product} /> <RelatedProducts products={relatedProducts} />); return (<></>);} '''## Streaming with Suspense Stream content as it loads for better perceived performance: '''jsx import { Suspense } from 'react '; export default function Page (){ return <Header /> <Suspense fallback={<ProductsSkeleton />(<>}> <Products /> </Suspense> <Suspense fallback={<ReviewsSkeleton />}> <Reviews /> </Suspense> </> ); } ``` ## Best Practices 1. Use Server Components by default - Only use 'use client' when needed 2. Keep Client Components small - Push them as far down the tree as possible 3. Use Server Actions for mutations - Simpler than API routes 4. Leverage streaming - Better UX with Suspense boundaries 5. Cache strategically - Use revalidation to keep data fresh
When to Use Client Components
Use 'use client' when you need:
- Event listeners (onClick, onChange, etc.)
- Browser APIs (localStorage, window, etc.)
- State hooks (useState, useReducer, etc.)
- Effect hooks (useEffect, useLayoutEffect)
- Custom hooks that use the above
Conclusion
Server Components and Server Actions represent the future of React development. They simplify data fetching, improve performance, and enhance security - all while reducing client-side JavaScript.
Start migrating your apps to this new paradigm today! 🎉