Next.js 14 کے Server Components بنڈل سائز کو تقریباً 60% تک کم کر دیتے ہیں اور ایک عام بلاگ پیج پر 'first-paint' کے وقت کو 200 ms سے کم کر دیتے ہیں، جس کا مطلب ہے کہ صارفین مواد کو تیزی سے دیکھ سکتے ہیں اور سرچ انجنوں کو مکمل طور پر رینڈر شدہ (rendered) HTML موصول ہوتا ہے۔

یہ نیا ورژن Next.js کے ساتھ بنائے گئے React ایپس کے ڈیفالٹ ایگزیکیوشن ماڈل کو مکمل طور پر بدل دیتا ہے۔ جہاں پہلے ہر کمپوننٹ براؤزر کو بھیجا جاتا تھا، اب ڈویلپرز UI کے حصوں کو "Server Components" کے طور پر نشان زد کر سکتے ہیں تاکہ وہ صرف بیک اینڈ پر چلیں۔ ان کمپوننٹس کا کوڈ کبھی کلائنٹ تک نہیں پہنچتا، جس سے براؤزر کے پاس صرف وہی حصے رہ جاتے ہیں جنہیں انٹرایکٹیویٹی (interactivity) کی ضرورت ہوتی ہے۔

یہ تبدیلی کیوں اہم ہے

React ڈویلپرز طویل عرصے سے تین باہم جڑے ہوئے مسائل سے نمٹ رہے ہیں: نیٹ ورک ریکویسٹس کی بھرمار، بھاری بھرکم JavaScript بنڈلز، اور سست پیج لوڈنگ۔ یہ مسائل SEO کو بھی نقصان پہنچاتے ہیں کیونکہ کرالرز (crawlers) کو بھیجا جانے والا ابتدائی HTML اکثر خالی ہوتا ہے، جس کی وجہ سے سرچ بوٹس کو کلائنٹ سائیڈ ہائیڈریشن (client-side hydration) کا انتظار کرنا پڑتا ہے۔ Next.js 14 ڈیٹا سے بھرپور کام کو مکمل طور پر کلائنٹ سے ہٹا کر اس بنیادی وجہ کا حل نکالتا ہے۔

Server Components پرانے ماڈل سے کیسے مختلف ہیں

  • Server Components – یہ سرور پر چلتے ہیں، ڈیٹا حاصل کرتے ہیں، ڈیٹا بیس سے بات کرتے ہیں، اور سادہ HTML آؤٹ پٹ دیتے ہیں۔ ان کا JavaScript کبھی نیٹ ورک پر منتقل نہیں ہوتا۔
  • Client Components – یہ براؤزر میں رہتے ہیں اور UI کے انٹرایکشنز جیسے بٹن کلک، فارم سبمیشن، یا کسی بھی ایسے کمپوننٹ کو سنبھالتے ہیں جو React state یا effects کا استعمال کرتا ہے۔

یہ فریم ورک ایک سادہ ڈائریکٹو (directive) کے ذریعے اس تقسیم کو نافذ کرتا ہے۔ کسی فائل کے اوپری حصے میں use client شامل کرنے سے Next.js کو یہ بتایا جاتا ہے کہ اس کمپوننٹ کو صرف کلائنٹ سائیڈ کے طور پر ہی سمجھا جائے۔ اس مارکر کے بغیر ہر چیز ڈیفالٹ طور پر Server Component ہوتی ہے۔

حقیقی دنیا کے اعداد و شمار

ایک ذاتی بلاگ پیج پر کیا گیا ایک چھوٹا سا تجربہ اس کے اثر کو واضح کرتا ہے۔ 'fetch' کو Server Component میں منتقل کرنے اور سرور کو لسٹ کو اسٹیٹک HTML کے طور پر رینڈر کرنے دینے کے بعد، JavaScript بنڈل 60% تک سکڑ گیا اور پیج 200 ms سے بھی کم وقت میں رینڈر ہو گیا۔

ایک عملی لیئرنگ پیٹرن (layering pattern)

  1. Bottom layer (Server) – APIs یا ڈیٹا بیس سے ڈیٹا حاصل کریں۔ کوئی بھی نجی لاجک (private logic) یہاں رکھیں؛ یہ کبھی سرور سے باہر نہیں جاتی۔
  2. Middle layer (Server) – خام ڈیٹا (raw data) کو خالص HTML مارک اپ میں تبدیل کریں۔ یہ لیئر اب بھی React کے JSX سنٹیکس کا استعمال کر سکتی ہے لیکن یہ صرف سرور تک محدود رہتی ہے۔
  3. Top layer (Client) – انٹرایکٹیویٹی کے لیے چھوٹے اور الگ تھلگ ویجٹس (widgets) شامل کریں۔ عام مثالوں میں "like" بٹن، کمنٹ فارمز، یا ڈراپ ڈاؤن مینیو شامل ہیں جنہیں state کی ضرورت ہوتی ہے۔

اس درجہ بندی (hierarchy) پر عمل کرنے سے ایپ کا زیادہ تر حصہ ہلکا پھلکا رہتا ہے جبکہ وہ ڈائنامک احساس بھی برقرار رہتا ہے جس کی صارفین توقع کرتے ہیں۔

وہ اقدامات جو آپ آج آزما سکتے ہیں

  1. اپنے کوڈ بیس میں ایسے کمپوننٹس تلاش کریں جو صرف ڈیٹا حاصل کرنے کے لیے useEffect کا استعمال کرتے ہیں۔
  2. 'fetch' کال کو ایک نئے Server Component میں نکالیں اور اسے رینڈر شدہ مارک اپ واپس کرنے دیں۔
  3. باقی ماندہ کسی بھی انٹرایکٹو عنصر کے لیے ایک کم سے کم (minimal) کلائنٹ کمپوننٹ بنائیں (اوپر use client شامل کریں)۔
  4. اپنا بنڈل اینالائزر (bundle analyzer) دوبارہ چلائیں؛ آپ کو سائز میں نمایاں کمی نظر آئے گی۔

ہر جگہ use client کا استعمال کرنے سے گریز کریں۔ اگر کوئی کمپوننٹ React state، context، یا lifecycle hooks پر انحصار نہیں کرتا، تو اسے Server Component ہی رہنے دیں۔ آپ جتنا زیادہ کوڈ کلائنٹ سے دور رکھیں گے، ڈاؤن لوڈ اتنا ہی کم ہوگا اور پیج اتنا ہی تیز چلے گا۔

خلاصہ: ڈیٹا فیچنگ اور بھاری رینڈرنگ کو سرور پر منتقل کر کے، Next.js 14 آپ کو بہت کم JavaScript بھیجنے، فوری طور پر مکمل رینڈر شدہ HTML فراہم کرنے، اور جہاں ضرورت ہو وہاں انٹرایکٹیویٹی برقرار رکھنے کی اجازت دیتا ہے۔ اس کا نتیجہ ایک تیز رفتار اور ہلکا پھلکا ویب تجربہ ہے جو صارفین اور سرچ انجنوں دونوں کے لیے فائدہ مند ہے۔