رد عمل 19 سرور اجزاء: کیا تبدیل ہوا اور کیوں

React 19 ہکس کے بعد سب سے اہم ریلیز ہے۔ سرور کے اجزاء، جو React 18 میں تجرباتی خصوصیت کے طور پر شروع ہوئے ہیں، اب مستحکم ہیں اور کنکرنٹ رینڈرنگ ماڈل کے ساتھ مکمل طور پر مربوط ہیں۔ لیکن تبدیلیاں صرف RSC کو مستحکم کرنے سے کہیں آگے ہیں — React 19 ایکشنز، ایک نیا use() ہک، فارم انٹیگریشن، پرامید اپ ڈیٹس، اور دستاویز میٹا ڈیٹا مینجمنٹ متعارف کراتی ہے جو کہ اجتماعی طور پر تبدیل کرتی ہے کہ آپ React ایپلی کیشنز میں ڈیٹا کے بہاؤ کے بارے میں کیسے سوچتے ہیں۔

یہ گائیڈ اس بات پر توجہ مرکوز کرتا ہے کہ React 18 اور 19 کے درمیان اصل میں کیا بدلا ہے، ہر تبدیلی کے پیچھے تعمیراتی استدلال کی وضاحت کرتا ہے، اور پرانے طریقوں کو بدلنے والے پروڈکشن پیٹرن دکھاتا ہے۔

اہم ٹیک ویز

سرور کے اجزاء صرف سرور پر چلتے ہیں - ان کا کوئی لائف سائیکل، کوئی اسٹیٹ، اور کوئی براؤزر API نہیں ہے

وعدوں اور سیاق و سباق کو استعمال کرنے کے لیے use() ہک کلائنٹ کے اجزاء میں await کی جگہ لے لیتا ہے

رد عمل 19 ایکشنز دستی useState + fetch پیٹرن کو فارم جمع کرانے کے لیے بدل دیتے ہیں

useOptimistic سرور کی تصدیق سے پہلے فوری UI اپ ڈیٹس کو قابل بناتا ہے۔

useFormStatus فارم کے اجزاء کے ذریعے پروپ ڈرلنگ کے بغیر آپ کو زیر التواء حالت فراہم کرتا ہے۔

Asset preloading APIs (preload, preinit) آپ کو اجزاء سے وسائل کی لوڈنگ کو کنٹرول کرنے دیتا ہے

<title>، <meta>، اور <link> اجزاء میں ٹیگز خود بخود <head> پر لہراتے ہیں

سرور کے اجزاء اور کلائنٹ کے اجزاء ایک درخت بناتے ہیں - کلائنٹ کے اجزاء سرور کے اجزاء کو درآمد نہیں کرسکتے ہیں۔

سرور کے اجزاء دراصل کیا ہیں۔

اس پر بحث کرنے سے پہلے کہ کیا تبدیلی آئی ہے، یہ واضح کریں کہ سرور کے اجزاء کیا ہیں: ایسے اجزاء کا رد عمل کریں جو خصوصی طور پر سرور پر پیش کرتے ہیں اور HTML + RSC پے لوڈ تیار کرتے ہیں جسے کلائنٹ ہائیڈریٹ کرتا ہے۔ وہ سرور کی طرف سے پیش کردہ کلائنٹ اجزاء کی طرح نہیں ہیں۔

اہم اختلافات:

	سرور اجزاء	کلائنٹ کے اجزاء
پر چلتا ہے	صرف سرور	سرور (ابتدائی رینڈر) + کلائنٹ
ہکس استعمال کر سکتے ہیں	نہیں	جی ہاں
براؤزر APIs استعمال کر سکتے ہیں	نہیں	جی ہاں
ڈیٹا بیس تک رسائی حاصل کر سکتے ہیں	ہاں (براہ راست)	نہیں (بذریعہ API)
بنڈل سائز اثر	صفر	جی ہاں
async کیا جا سکتا ہے	جی ہاں	نہیں (بغیر سسپنس)

// Server Component — async, no hooks, direct DB access
async function UserProfile({ userId }: { userId: string }) {
  // Direct database query — no API needed
  const user = await db.query.users.findFirst({
    where: eq(users.id, userId),
  });

  return (
    <div>
      <h1>{user.name}</h1>
      {/* Client Component gets data as props */}
      <UserActions userId={user.id} role={user.role} />
    </div>
  );
}

// Client Component — can use hooks, handles interactions
'use client';

function UserActions({ userId, role }: { userId: string; role: string }) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <button onClick={() => setIsEditing(true)}>Edit</button>
      {isEditing && <EditUserForm userId={userId} />}
    </div>
  );
}

رد عمل 19 اعمال

React 19 میں سب سے بڑی ergonomic بہتری ایکشنز ہے — صارف کے تعاملات، خاص طور پر فارم جمع کرانے کے ذریعے متحرک ہونے والے async آپریشنز کو ہینڈل کرنے کا ایک معیاری طریقہ۔

React 19 سے پہلے، فارم کی ہینڈلنگ دہرائی جانے والی بوائلر پلیٹ تھی:

// React 18 — manual state management
function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);
    setError(null);

    try {
      await createContact({ name, email });
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* ... */}
    </form>
  );
}

React 19 ایکشنز اس کو نمایاں طور پر ہموار کرتی ہیں:

// React 19 — useActionState
'use client';

import { useActionState } from 'react';

async function createContactAction(
  prevState: { error?: string },
  formData: FormData
) {
  'use server'; // Server Action — runs on the server

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  try {
    await createContact({ name, email });
    return { success: true };
  } catch (err) {
    return { error: err.message };
  }
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    createContactAction,
    {}
  );

  return (
    <form action={formAction}>
      <input name="name" required />
      <input name="email" type="email" required />
      {state.error && <p className="text-red-500">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

useActionState ہک زیر التواء حالت، فارم ڈیٹا، اور غلطی سے نمٹنے کا انتظام ایک جگہ پر کرتا ہے۔ ایکشن فنکشن پر 'use server' ہدایت اسے سرور ایکشن کے طور پر نشان زد کرتی ہے — یہ سرور پر چلتا ہے، ڈیٹا بیس تک براہ راست رسائی حاصل کر سکتا ہے، اور کلائنٹ کبھی بھی عمل درآمد نہیں دیکھتا ہے۔

سرور کے اعمال

سرور ایکشنز 'use server' ہدایت کے ساتھ async فنکشنز ہیں جو کلائنٹ کی طرف سے کال کرنے پر سرور پر چلتے ہیں۔ وہ زیادہ تر ڈیٹا میوٹیشن کے استعمال کے معاملات کے لیے API روٹس کو تبدیل کرتے ہیں:

// app/actions/contacts.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@ecosire/db';
import { contacts } from '@ecosire/db/schema';

export async function createContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  if (!name || !email) {
    throw new Error('Name and email are required');
  }

  await db.insert(contacts).values({
    name,
    email,
    organizationId: await getOrganizationId(), // From session
  });

  revalidatePath('/dashboard/contacts'); // Invalidate cached page
  redirect('/dashboard/contacts'); // Redirect after success
}

سرور کے اعمال کو براہ راست form عناصر میں استعمال کیا جا سکتا ہے:

import { createContact } from '@/app/actions/contacts';

export default function NewContactPage() {
  return (
    <form action={createContact}>
      <input name="name" placeholder="Name" required />
      <input name="email" placeholder="Email" type="email" required />
      <button type="submit">Create Contact</button>
    </form>
  );
}

کوئی onSubmit ہینڈلر، کوئی preventDefault()، کوئی دستی fetch() نہیں — فارم صرف کام کرتا ہے۔

استعمال () ہک

ری ایکٹ 19 نے رینڈر کے اندر وسائل (وعدے اور سیاق و سباق) استعمال کرنے کے لیے use() ہک متعارف کرایا ہے۔ await کے برعکس، یہ React کے سسپنس سسٹم کے ساتھ کام کرتا ہے:

// Before React 19 — had to resolve at the top level
export default async function Page() {
  const posts = await getPosts(); // Blocks entire page
  return <PostList posts={posts} />;
}

// React 19 — pass a promise, resolve with use()
export default function Page() {
  const postsPromise = getPosts(); // Start fetch immediately

  return (
    <Suspense fallback={<PostsSkeleton />}>
      <PostList postsPromise={postsPromise} />
    </Suspense>
  );
}

// Client Component using use() to consume the promise
'use client';

function PostList({ postsPromise }: { postsPromise: Promise<Post[]> }) {
  const posts = use(postsPromise); // Suspends until resolved

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

use() ہک بھی useContext() کی جگہ لے لیتا ہے — یہ سیاق و سباق کو مشروط طور پر استعمال کر سکتا ہے (ہکس کے برعکس، use() کو اندرونی حالات اور لوپس کہا جا سکتا ہے):

'use client';

import { use } from 'react';
import { ThemeContext } from '@/contexts/theme';

function Button({ children }: { children: React.ReactNode }) {
  const theme = use(ThemeContext); // Can be inside conditions

  return (
    <button className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'}>
      {children}
    </button>
  );
}

آپٹیمسٹک استعمال کے ساتھ پرامید اپڈیٹس

useOptimistic سرور کے آپریشن کے مکمل ہونے سے پہلے فوری UI فیڈ بیک فراہم کرتا ہے، اگر آپریشن ناکام ہوجاتا ہے تو خود بخود واپس آجاتا ہے:

'use client';

import { useOptimistic, useTransition } from 'react';

interface Like {
  id: string;
  count: number;
  userLiked: boolean;
}

function LikeButton({ postId, initialLikes }: { postId: string; initialLikes: Like }) {
  const [likes, setOptimisticLikes] = useOptimistic(
    initialLikes,
    (state, action: 'like' | 'unlike') => ({
      ...state,
      count: action === 'like' ? state.count + 1 : state.count - 1,
      userLiked: action === 'like',
    })
  );

  const [isPending, startTransition] = useTransition();

  async function toggleLike() {
    const action = likes.userLiked ? 'unlike' : 'like';

    startTransition(async () => {
      setOptimisticLikes(action); // Instant UI update

      // Server operation — if this fails, optimistic state reverts
      await togglePostLike(postId, action);
    });
  }

  return (
    <button onClick={toggleLike} disabled={isPending}>
      {likes.userLiked ? '♥' : '♡'} {likes.count}
    </button>
  );
}

پرامید اپ ڈیٹ فوری طور پر ظاہر ہوتا ہے، پھر یا تو ارتکاب کرتا ہے (سرور کی کامیابی) یا واپس (سرور کی ناکامی)۔ صارفین نیٹ ورک راؤنڈ ٹرپس کا انتظار کیے بغیر فوری فیڈ بیک حاصل کرتے ہیں۔

اجزاء سے دستاویزی میٹا ڈیٹا

رد عمل 19 <title>، <meta>، اور <link> ٹیگز کو کسی بھی جزو کے اندر پیش کرنے کی اجازت دیتا ہے — وہ خود بخود دستاویز <head> پر لہراتے ہیں:

// Server Component — metadata hoists to <head> automatically
async function BlogPost({ slug }: { slug: string }) {
  const post = await getPost(slug);

  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <link rel="canonical" href={`https://ecosire.com/blog/${slug}`} />

      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

یہ سرور اور کلائنٹ دونوں اجزاء میں کام کرتا ہے۔ Next.js جیسے فریم ورک میں، آپ OpenGraph ٹیگز اور hreflang اوصاف پر مکمل کنٹرول کے لیے اب بھی generateMetadata() استعمال کریں گے — React 19 کی مقامی حمایت زیادہ بنیادی ہے۔ لیکن سادہ معاملات کے لیے، یہ next/head یا اسی طرح کی لائبریریوں کی ضرورت کو ختم کرتا ہے۔

اثاثہ لوڈنگ APIs

React 19 وسائل کو پہلے سے لوڈ کرنے کے لیے واضح APIs فراہم کرتا ہے، جس سے آپ کو وسائل کی لوڈنگ آبشار پر عمدہ کنٹرول ملتا ہے:

import { preload, preinit, prefetchDNS, preconnect } from 'react-dom';

function BelowFoldSection() {
  // When this component renders, preload the hero image for next section
  preload('/images/hero-next.webp', { as: 'image' });

  // Preinit a script (loads and executes immediately)
  preinit('https://cdn.example.com/analytics.js', { as: 'script' });

  // DNS prefetch for external resources
  prefetchDNS('https://fonts.googleapis.com');

  // Establish connection early
  preconnect('https://api.ecosire.com');

  return <section>{/* content */}</section>;
}

یہ APIs React کے رینڈرنگ ماڈل کے ساتھ صحیح طریقے سے کام کرتے ہیں - وہ وسائل کے اشارے بیچتے ہیں اور دستاویز کے بہترین نقطہ پر خارج کرتے ہیں، یہاں تک کہ جزو کے درخت کی گہرائی سے بھی۔

مشترکہ نقصانات اور حل

خطرہ 1: سرور کے اجزاء میں ہکس استعمال کرنے کی کوشش کرنا

سرور کے اجزاء useState، useEffect، useContext، یا کوئی اور ہک استعمال نہیں کرسکتے ہیں۔ اگر آپ کو ان کی ضرورت ہو تو، جزو میں 'use client' شامل کریں۔ غلطی عام طور پر ہوتی ہے: Error: Hooks can only be called inside a function component۔

خطرہ 2: کلائنٹ کے اجزاء سے سرور کے اجزاء درآمد کرنا

کلائنٹ کے اجزاء سرور کے اجزاء درآمد نہیں کرسکتے ہیں (الٹا ٹھیک ہے)۔ اس کی وجہ یہ ہے کہ کلائنٹ کے اجزاء براؤزر میں چلتے ہیں جہاں سرور کے اجزاء موجود نہیں ہوتے ہیں۔ اگر آپ کو انہیں تحریر کرنے کی ضرورت ہے تو، سرور کے اجزاء کو children پرپس کے طور پر پاس کریں:

// Wrong — Client Component cannot import Server Component
'use client';
import { ServerUserProfile } from './server-user-profile'; // Error

// Correct — pass as children from a Server Component parent
// Parent (Server):
<ClientShell>
  <ServerUserProfile userId={userId} />
</ClientShell>

// ClientShell:
'use client';
function ClientShell({ children }: { children: React.ReactNode }) {
  return <div className="shell">{children}</div>;
}

پِٹفال 3: سرور سے کلائنٹ کو پروپس منتقل کرتے وقت سیریلائزیشن کی خرابیاں

صرف JSON- سیریلائز ایبل ڈیٹا ہی سرور-کلائنٹ کی حد کو پرپس کے طور پر عبور کر سکتا ہے۔ فنکشنز، کلاس انسٹینس، نقشہ، سیٹ، اور تاریخیں (بطور آبجیکٹ) کو سیریلائز نہیں کیا جا سکتا۔ تاریخوں کو آئی ایس او سٹرنگز میں تبدیل کریں۔ سٹرنگ شناخت کنندگان کے ساتھ فنکشنز کو تبدیل کریں۔

خطرہ 4: سرور کے اعمال ان پٹ کی توثیق نہیں کررہے ہیں

سرور ایکشنز میں کلائنٹ کے فراہم کردہ ڈیٹا پر کبھی بھروسہ نہ کریں۔ ڈیٹا بیس پر لکھنے سے پہلے ہمیشہ Zod یا اسی طرح کی تصدیق کریں:

'use server';

import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2).max(255),
  email: z.string().email(),
});

export async function createContact(formData: FormData) {
  const result = schema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!result.success) {
    return { error: result.error.flatten().fieldErrors };
  }

  await db.insert(contacts).values(result.data);
}

اکثر پوچھے گئے سوالات

کیا سرور کے اجزاء Next.js سے باہر دستیاب ہیں؟

ری ایکٹ سرور کے اجزاء ایک ری ایکٹ فیچر ہیں، لیکن انہیں سرور رینڈرنگ انفراسٹرکچر - روٹنگ، بنڈلنگ، اسٹریمنگ کو سنبھالنے کے لیے ایک فریم ورک کی ضرورت ہوتی ہے۔ Next.js ایپ راؤٹر سب سے زیادہ پختہ عمل درآمد ہے۔ ریمکس، ایسٹرو، اور وائٹ پر مبنی سیٹ اپ RSC سپورٹ شامل کر رہے ہیں۔ بغیر کسی فریم ورک کے RSC کا استعمال کرنے کے لیے اہم کسٹم انفراسٹرکچر کام کی ضرورت ہوتی ہے۔

سرور ایکشنز کا موازنہ REST API روٹس سے کیسے ہوتا ہے؟

سرور کی کارروائیاں UI کے ساتھ کی گئی تبدیلیوں کے لیے آسان ہیں — نظم کرنے کے لیے کوئی اینڈ پوائنٹ یو آر ایل نہیں، لکھنے کے لیے fetch() کال نہیں، بوائلر پلیٹ کو ہینڈل کرنے میں کوئی خرابی نہیں۔ REST API روٹس ویب ایپ (موبائل ایپس، ویب ہکس، تھرڈ پارٹی انٹیگریشن) کے باہر سے بلائے جانے والے آپریشنز کے لیے بہتر ہوتے ہیں، ایسے عوامی API کے لیے جنہیں دستاویزات کی ضرورت ہوتی ہے، اور جب آپ کو واضح HTTP اسٹیٹس کوڈز کی ضرورت ہوتی ہے۔ استعمال کے معاملے کی بنیاد پر دونوں کو ایک ہی ایپلیکیشن میں استعمال کریں۔

سرور کے اجزاء کی کارکردگی کا کیا اثر ہے؟

سرور کے اجزاء جاوا اسکرپٹ بنڈل کے سائز کو کم کرتے ہیں (جز کا کوڈ کبھی بھی براؤزر پر نہیں بھیجتا)، کلائنٹ سائیڈ ڈیٹا حاصل کرنے والے آبشاروں کو ختم کرتا ہے، اور سسپنس کے ذریعے HTML ڈیلیوری کو سٹریم کرنے کو فعال کرتا ہے۔ ٹریڈ آف سرور کمپیوٹ لاگت ہے — رینڈرنگ آپ کے سرورز پر ہوتی ہے، کلائنٹ کے آلے پر نہیں۔ ڈیٹا سے بھرے صفحات کے لیے، یہ تقریباً ہمیشہ خالص جیت ہوتی ہے۔

کیا میں React 18 اور React 19 کو کوڈ بیس میں ملا سکتا ہوں؟

تمام React کوڈ React 19 کے طور پر چلتا ہے - فی فائل ورژننگ نہیں ہے۔ سوال یہ ہے کہ کیا آپ کا موجودہ React 18 کوڈ React 19 میں کام کرتا ہے۔ زیادہ تر React 18 کوڈ میں کوئی تبدیلی نہیں ہوتی۔ اہم بریکنگ تبدیلیاں refs (اب ایک باقاعدہ سہارا)، ReactDOM.render ہٹانا، اور @types/react میں ٹائپنگ کی کچھ تبدیلیاں ہیں۔ خودکار منتقلی کے لیے React 19 codemods چلائیں۔

میں سرور کے اجزاء کی جانچ کیسے کروں؟

async render کا استعمال کرتے ہوئے React ٹیسٹنگ لائبریری کے ساتھ سرور کے اجزاء کی جانچ کی جا سکتی ہے۔ سرور ایکشنز کے لیے، مضحکہ خیز ڈیٹا بیس کالز کے ساتھ سادہ async فنکشنز کے طور پر ان کی جانچ کریں۔ پلے رائٹ کے ساتھ اینڈ ٹو اینڈ ٹیسٹ بغیر کسی خاص سیٹ اپ کے مکمل سرور اجزاء + کلائنٹ اجزاء کے انضمام کا احاطہ کرتے ہیں — وہ حتمی HTML آؤٹ پٹ کی جانچ کرتے ہیں۔

اگلے اقدامات

React 19 سرور کے اجزاء اس بنیادی تبدیلی کی نمائندگی کرتے ہیں کہ جدید ویب ایپلیکیشنز کیسے بنتی ہیں۔ ECOSIRE کی فرنٹ اینڈ ٹیم نے اس آرکیٹیکچر پر پروڈکشن ایپلی کیشنز بنائے ہیں — سرور کے اجزاء، سرور ایکشنز، اور حقیقی صارف کے ورک فلو کو طاقت دینے والے پر امید اپ ڈیٹس کے ساتھ 249 صفحات۔

اگر آپ کو React 18 سے 19 تک ہجرت کرنے میں مدد درکار ہے، ایک نئی RSC-پہلی ایپلیکیشن کی تعمیر، یا صرف اپنی ٹیم میں ماہر فرنٹ اینڈ انجینئرنگ چاہتے ہیں، ہماری ترقیاتی خدمات کو دریافت کریں۔

رد عمل 19 سرور اجزاء: کیا تبدیل ہوا اور کیوں

اہم ٹیک ویز

سرور کے اجزاء صرف سرور پر چلتے ہیں - ان کا کوئی لائف سائیکل، کوئی اسٹیٹ، اور کوئی براؤزر API نہیں ہے

وعدوں اور سیاق و سباق کو استعمال کرنے کے لیے use() ہک کلائنٹ کے اجزاء میں await کی جگہ لے لیتا ہے

رد عمل 19 ایکشنز دستی useState + fetch پیٹرن کو فارم جمع کرانے کے لیے بدل دیتے ہیں

useOptimistic سرور کی تصدیق سے پہلے فوری UI اپ ڈیٹس کو قابل بناتا ہے۔

useFormStatus فارم کے اجزاء کے ذریعے پروپ ڈرلنگ کے بغیر آپ کو زیر التواء حالت فراہم کرتا ہے۔

Asset preloading APIs (preload, preinit) آپ کو اجزاء سے وسائل کی لوڈنگ کو کنٹرول کرنے دیتا ہے

<title>، <meta>، اور <link> اجزاء میں ٹیگز خود بخود <head> پر لہراتے ہیں

سرور کے اجزاء اور کلائنٹ کے اجزاء ایک درخت بناتے ہیں - کلائنٹ کے اجزاء سرور کے اجزاء کو درآمد نہیں کرسکتے ہیں۔

سرور کے اجزاء دراصل کیا ہیں۔

اہم اختلافات:

	سرور اجزاء	کلائنٹ کے اجزاء
پر چلتا ہے	صرف سرور	سرور (ابتدائی رینڈر) + کلائنٹ
ہکس استعمال کر سکتے ہیں	نہیں	جی ہاں
براؤزر APIs استعمال کر سکتے ہیں	نہیں	جی ہاں
ڈیٹا بیس تک رسائی حاصل کر سکتے ہیں	ہاں (براہ راست)	نہیں (بذریعہ API)
بنڈل سائز اثر	صفر	جی ہاں
async کیا جا سکتا ہے	جی ہاں	نہیں (بغیر سسپنس)

// Server Component — async, no hooks, direct DB access
async function UserProfile({ userId }: { userId: string }) {
  // Direct database query — no API needed
  const user = await db.query.users.findFirst({
    where: eq(users.id, userId),
  });

  return (
    <div>
      <h1>{user.name}</h1>
      {/* Client Component gets data as props */}
      <UserActions userId={user.id} role={user.role} />
    </div>
  );
}

// Client Component — can use hooks, handles interactions
'use client';

function UserActions({ userId, role }: { userId: string; role: string }) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <button onClick={() => setIsEditing(true)}>Edit</button>
      {isEditing && <EditUserForm userId={userId} />}
    </div>
  );
}

رد عمل 19 اعمال

React 19 سے پہلے، فارم کی ہینڈلنگ دہرائی جانے والی بوائلر پلیٹ تھی:

// React 18 — manual state management
function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);
    setError(null);

    try {
      await createContact({ name, email });
    } catch (err) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* ... */}
    </form>
  );
}

React 19 ایکشنز اس کو نمایاں طور پر ہموار کرتی ہیں:

// React 19 — useActionState
'use client';

import { useActionState } from 'react';

async function createContactAction(
  prevState: { error?: string },
  formData: FormData
) {
  'use server'; // Server Action — runs on the server

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  try {
    await createContact({ name, email });
    return { success: true };
  } catch (err) {
    return { error: err.message };
  }
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    createContactAction,
    {}
  );

  return (
    <form action={formAction}>
      <input name="name" required />
      <input name="email" type="email" required />
      {state.error && <p className="text-red-500">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

سرور کے اعمال

// app/actions/contacts.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { db } from '@ecosire/db';
import { contacts } from '@ecosire/db/schema';

export async function createContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;

  if (!name || !email) {
    throw new Error('Name and email are required');
  }

  await db.insert(contacts).values({
    name,
    email,
    organizationId: await getOrganizationId(), // From session
  });

  revalidatePath('/dashboard/contacts'); // Invalidate cached page
  redirect('/dashboard/contacts'); // Redirect after success
}

سرور کے اعمال کو براہ راست form عناصر میں استعمال کیا جا سکتا ہے:

import { createContact } from '@/app/actions/contacts';

export default function NewContactPage() {
  return (
    <form action={createContact}>
      <input name="name" placeholder="Name" required />
      <input name="email" placeholder="Email" type="email" required />
      <button type="submit">Create Contact</button>
    </form>
  );
}

کوئی onSubmit ہینڈلر، کوئی preventDefault()، کوئی دستی fetch() نہیں — فارم صرف کام کرتا ہے۔

استعمال () ہک

// Before React 19 — had to resolve at the top level
export default async function Page() {
  const posts = await getPosts(); // Blocks entire page
  return <PostList posts={posts} />;
}

// React 19 — pass a promise, resolve with use()
export default function Page() {
  const postsPromise = getPosts(); // Start fetch immediately

  return (
    <Suspense fallback={<PostsSkeleton />}>
      <PostList postsPromise={postsPromise} />
    </Suspense>
  );
}

// Client Component using use() to consume the promise
'use client';

function PostList({ postsPromise }: { postsPromise: Promise<Post[]> }) {
  const posts = use(postsPromise); // Suspends until resolved

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

'use client';

import { use } from 'react';
import { ThemeContext } from '@/contexts/theme';

function Button({ children }: { children: React.ReactNode }) {
  const theme = use(ThemeContext); // Can be inside conditions

  return (
    <button className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'}>
      {children}
    </button>
  );
}

آپٹیمسٹک استعمال کے ساتھ پرامید اپڈیٹس

'use client';

import { useOptimistic, useTransition } from 'react';

interface Like {
  id: string;
  count: number;
  userLiked: boolean;
}

function LikeButton({ postId, initialLikes }: { postId: string; initialLikes: Like }) {
  const [likes, setOptimisticLikes] = useOptimistic(
    initialLikes,
    (state, action: 'like' | 'unlike') => ({
      ...state,
      count: action === 'like' ? state.count + 1 : state.count - 1,
      userLiked: action === 'like',
    })
  );

  const [isPending, startTransition] = useTransition();

  async function toggleLike() {
    const action = likes.userLiked ? 'unlike' : 'like';

    startTransition(async () => {
      setOptimisticLikes(action); // Instant UI update

      // Server operation — if this fails, optimistic state reverts
      await togglePostLike(postId, action);
    });
  }

  return (
    <button onClick={toggleLike} disabled={isPending}>
      {likes.userLiked ? '♥' : '♡'} {likes.count}
    </button>
  );
}

اجزاء سے دستاویزی میٹا ڈیٹا

// Server Component — metadata hoists to <head> automatically
async function BlogPost({ slug }: { slug: string }) {
  const post = await getPost(slug);

  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <link rel="canonical" href={`https://ecosire.com/blog/${slug}`} />

      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

اثاثہ لوڈنگ APIs

import { preload, preinit, prefetchDNS, preconnect } from 'react-dom';

function BelowFoldSection() {
  // When this component renders, preload the hero image for next section
  preload('/images/hero-next.webp', { as: 'image' });

  // Preinit a script (loads and executes immediately)
  preinit('https://cdn.example.com/analytics.js', { as: 'script' });

  // DNS prefetch for external resources
  prefetchDNS('https://fonts.googleapis.com');

  // Establish connection early
  preconnect('https://api.ecosire.com');

  return <section>{/* content */}</section>;
}

مشترکہ نقصانات اور حل

خطرہ 1: سرور کے اجزاء میں ہکس استعمال کرنے کی کوشش کرنا

خطرہ 2: کلائنٹ کے اجزاء سے سرور کے اجزاء درآمد کرنا

// Wrong — Client Component cannot import Server Component
'use client';
import { ServerUserProfile } from './server-user-profile'; // Error

// Correct — pass as children from a Server Component parent
// Parent (Server):
<ClientShell>
  <ServerUserProfile userId={userId} />
</ClientShell>

// ClientShell:
'use client';
function ClientShell({ children }: { children: React.ReactNode }) {
  return <div className="shell">{children}</div>;
}

پِٹفال 3: سرور سے کلائنٹ کو پروپس منتقل کرتے وقت سیریلائزیشن کی خرابیاں

خطرہ 4: سرور کے اعمال ان پٹ کی توثیق نہیں کررہے ہیں

'use server';

import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2).max(255),
  email: z.string().email(),
});

export async function createContact(formData: FormData) {
  const result = schema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!result.success) {
    return { error: result.error.flatten().fieldErrors };
  }

  await db.insert(contacts).values(result.data);
}

اکثر پوچھے گئے سوالات

کیا سرور کے اجزاء Next.js سے باہر دستیاب ہیں؟

سرور ایکشنز کا موازنہ REST API روٹس سے کیسے ہوتا ہے؟

سرور کے اجزاء کی کارکردگی کا کیا اثر ہے؟

کیا میں React 18 اور React 19 کو کوڈ بیس میں ملا سکتا ہوں؟

میں سرور کے اجزاء کی جانچ کیسے کروں؟

React 19 Server Components: What Changed and Why

رد عمل 19 سرور اجزاء: کیا تبدیل ہوا اور کیوں

سرور کے اجزاء دراصل کیا ہیں۔

رد عمل 19 اعمال

سرور کے اعمال

استعمال () ہک

آپٹیمسٹک استعمال کے ساتھ پرامید اپڈیٹس

اجزاء سے دستاویزی میٹا ڈیٹا

اثاثہ لوڈنگ APIs

مشترکہ نقصانات اور حل

اکثر پوچھے گئے سوالات

اگلے اقدامات

متعلقہ مضامین

k6 Load Testing: Stress-Test Your APIs Before Launch

Next.js 16 App Router: Production Patterns and Pitfalls

Odoo Performance Tuning: PostgreSQL and Server Optimization

Performance & Scalability سے مزید

k6 Load Testing: Stress-Test Your APIs Before Launch

Nginx Production Configuration: SSL, Caching, and Security

Odoo Performance Tuning: PostgreSQL and Server Optimization

Odoo vs Acumatica: Cloud ERP for Growing Businesses

Testing and Monitoring AI Agents in Production

Compliance Monitoring Agents with OpenClaw

React 19 Server Components: What Changed and Why

رد عمل 19 سرور اجزاء: کیا تبدیل ہوا اور کیوں

سرور کے اجزاء دراصل کیا ہیں۔

رد عمل 19 اعمال

سرور کے اعمال

استعمال () ہک

آپٹیمسٹک استعمال کے ساتھ پرامید اپڈیٹس

اجزاء سے دستاویزی میٹا ڈیٹا

اثاثہ لوڈنگ APIs

مشترکہ نقصانات اور حل

اکثر پوچھے گئے سوالات

اگلے اقدامات

متعلقہ مضامین

k6 Load Testing: Stress-Test Your APIs Before Launch

Next.js 16 App Router: Production Patterns and Pitfalls

Odoo Performance Tuning: PostgreSQL and Server Optimization

Performance & Scalability سے مزید

k6 Load Testing: Stress-Test Your APIs Before Launch

Nginx Production Configuration: SSL, Caching, and Security

Odoo Performance Tuning: PostgreSQL and Server Optimization

Odoo vs Acumatica: Cloud ERP for Growing Businesses

Testing and Monitoring AI Agents in Production

Compliance Monitoring Agents with OpenClaw