React اور Next.js میں سست لوڈنگ کے لیے ڈویلپر کی گائیڈ

}>

زیادہ بہتر فال بیک سمجھی کارکردگی کو بہتر بناتا ہے۔

function LoadingSpinner() {
  return (
    
  );
}

}>
  

غلطی کی حدود کے ساتھ غلطیوں کو کیسے ہینڈل کریں۔

React.lazy() اور Suspense لوڈنگ کی غلطیوں کو نہ سنبھالیں (جیسے نیٹ ورک کی خرابیاں یا گمشدہ حصے)۔ اس کے لیے غلطی کی حد درکار ہے۔

غلطی کی حد ایک کلاس جزو ہے جو استعمال کرتا ہے: componentDidCatch یا static getDerivedStateFromError یہ ذیلی درخت میں غلطیاں پکڑتا ہے اور فال بیک UI پیش کرتا ہے۔

یہاں ایک سادہ غلطی کی حد ہے:

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || 
Something went wrong.
;
    }
    return this.props.children;
  }
}

آپ کی پیکیجنگ Suspense غلطی کی حد کے ساتھ حد:

import { lazy, Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const HeavyChart = lazy(() => import('./HeavyChart'));

function App() {
  return (
    Failed to load chart. Please try again.}>
      Loading chart...}>
        
      
    
  );
}

اگر کوئی حصہ لوڈ نہیں کیا جاتا ہے تو، ایک ایرر باؤنڈری اسے پکڑ لیتی ہے اور خالی اسکرین یا غیر ہینڈل غلطی کی بجائے فال بیک دکھاتی ہے۔

استعمال کرنے کا طریقہ next/dynamic Next.js میں

Next.js کے ذریعے تقویت یافتہ next/dynamicیہ ریپنگ ہے۔ React.lazy() اور Suspense Next.js کے مطابق اختیارات شامل کرتا ہے (بشمول سرور سائیڈ رینڈرنگ)۔

بنیادی استعمال:

'use client';

import dynamic from 'next/dynamic';

const ComponentA = dynamic(() => import('../components/A'));
const ComponentB = dynamic(() => import('../components/B'));

export default function Page() {
  return (
    
  );
}

حسب ضرورت لوڈنگ UI

استعمال کریں loading اجزاء کے لوڈ ہونے کے دوران پلیس ہولڈرز کو ظاہر کرنے کے اختیارات:

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: () => 
Loading chart...
,
});

سرور سائیڈ رینڈرنگ کو غیر فعال کریں۔

ان اجزاء کے لیے جو صرف کلائنٹ پر چلنا چاہیے، جیسے window یا براؤزر کے لیے مخصوص API)، ترتیبات ssr: false:

const ClientOnlyMap = dynamic(() => import('../components/Map'), {
  ssr: false,
  loading: () => 
Loading map...
,
});

میمو: ssr: false یہ صرف کلائنٹ کے اجزاء کے لیے کام کرتا ہے۔ اندرونی طور پر استعمال کیا جاتا ہے 'use client' فائل

مانگ پر لوڈ کریں۔

کسی جزو کو صرف اس صورت میں لوڈ کیا جا سکتا ہے جب شرائط پوری ہوں۔

'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Modal = dynamic(() => import('../components/Modal'), {
  loading: () => 
Opening modal...
,
});

export default function Page() {
  const [showModal, setShowModal] = useState(false);

  return (
    

       setShowModal(true)}>Open Modal
      {showModal &&  setShowModal(false)} />}
    
  );
}

برآمد کا نام دیا گیا۔

نامزد برآمدات کے لیے، متحرک درآمدات اجزاء کو واپس کرتی ہیں۔

const Hello = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
);

اگلا/متحرک طور پر سسپنس کا استعمال

React 18+ میں آپ استعمال کر سکتے ہیں: suspense: true اپنے والدین پر بھروسہ کریں۔ Suspense سرحد کے بجائے loading اختیارات:

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  suspense: true,
});

// In your component:
Loading...}>
  

اہم: استعمال کرتے وقت suspense: trueآپ استعمال نہیں کر سکتے ssr: false یا loading اختیارات۔ استعمال کریں Suspense کیا بات ہے۔

React.lazy بڑا next/dynamic: ہر ایک کو کب استعمال کرنا ہے۔

خصوصیت	React.lazy + سسپنس	اگلا/متحرک
کنکال	کوئی بھی ری ایکٹ ایپ (ری ایکٹ ایپس بنانا، وائٹ وغیرہ)	صرف Next.js
سرور سائیڈ رینڈرنگ	تعاون یافتہ نہیں۔	بطور ڈیفالٹ تعاون یافتہ
SSR کو غیر فعال کریں۔	قابل اطلاق نہیں۔	ssr: false اختیارات
UI لوڈ ہو رہا ہے۔	Suspense متبادل سہارے	اندرونی سجاوٹ loading اختیارات
ہینڈلنگ میں خرابی	خرابی کی حد درکار ہے۔	خرابی کی حد درکار ہے۔
برآمد کا نام دیا گیا۔	غیر فعالی .then() نقشہ سازی	ایک ہی .then() پیٹرن
سسپنس موڈ	ہمیشہ سسپنس استعمال کریں۔	اختیاری suspense: true

کب استعمال کرنا ہے۔ React.lazy

• آپ تعمیر کر رہے ہیں خالص رد عمل ایپ (Next.js نہیں)

• تخلیق ری ایکٹ ایپ، وائٹ یا حسب ضرورت ویب پیک سیٹ اپ استعمال کریں۔

• سرور سائیڈ رینڈرنگ کی ضرورت نہیں ہے۔

• آپ ایک سادہ، فریم ورک-ایگنوسٹک اپروچ چاہتے ہیں۔

جب Use next/dynamic

• آپ تعمیر کر رہے ہیں Next.js ایپ

• کچھ اجزاء کو SSR کی ضرورت ہوتی ہے، جبکہ دوسرے SSR کو غیر فعال کرنا چاہتے ہیں۔

• میں اسے دستی طور پر شامل کرنے کے بجائے بلٹ ان لوڈنگ پلیس ہولڈر چاہتا ہوں۔ Suspense

• میں Next.js کی مخصوص اصلاح اور ڈیفالٹس چاہتا ہوں۔

حقیقی کیس

مثال 1: React میں پاتھ پر مبنی کوڈ کی تقسیم

اپنی ایپ کو راستے کے لحاظ سے تقسیم کریں تاکہ ہر صفحہ صرف اس وقت لوڈ ہو جب صارف اس پر نیویگیٹ کرے۔

// App.jsx
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ErrorBoundary from './ErrorBoundary';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    
      Failed to load page.}>
        Loading page...}>
          
            } />
            } />
            } />
          
        
      
    
  );
}

مثال 2: Next.js میں بھاری چارٹ لائبریری کی سست لوڈنگ

چارٹ لائبریری کو لوڈ کرنا اس وقت تک موخر کریں جب تک کہ صارف تجزیہ سیکشن نہ کھولے۔

// app/analytics/page.jsx
'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false,
  loading: () => (
    
  ),
});

export default function AnalyticsPage() {
  const [showChart, setShowChart] = useState(false);

  return (
    

      
       setShowChart(true)}>Load Chart
      {showChart && }
    
  );
}

مثال 3: موڈل سست لوڈنگ

موڈل جزو کو صرف اس وقت لوڈ کریں جب صارف اسے کھولنے کے لیے کلک کرے۔

// React (with React.lazy)
import { lazy, Suspense, useState } from 'react';

const Modal = lazy(() => import('./Modal'));

function ProductPage() {
  const [showModal, setShowModal] = useState(false);

  return (
    

       setShowModal(true)}>Add to Cart
      {showModal && (
        
           setShowModal(false)} />
        
      )}
    
  );
}

// Next.js (with next/dynamic)
'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Modal = dynamic(() => import('./Modal'), {
  loading: () => null,
});

export default function ProductPage() {
  const [showModal, setShowModal] = useState(false);

  return (
    

       setShowModal(true)}>Add to Cart
      {showModal &&  setShowModal(false)} />}
    
  );
}

مثال 4: سست لوڈنگ بیرونی لائبریریاں

لائبریریوں کو صرف اس وقت لوڈ کریں جب صارف کو ان کی ضرورت ہو (مثال کے طور پر، جب وہ سرچ باکس میں ٹائپ کرنا شروع کریں)۔

'use client';

import { useState } from 'react';

const names = ['Alice', 'Bob', 'Charlie', 'Diana'];

export default function SearchPage() {
  const [results, setResults] = useState([]);
  const [query, setQuery] = useState('');

  const handleSearch = async (value) => {
    setQuery(value);
    if (!value) {
      setResults([]);
      return;
    }
    // Load fuse.js only when user searches
    const Fuse = (await import('fuse.js')).default;
    const fuse = new Fuse(names);
    setResults(fuse.search(value));
  };

  return (
    
  );
}

نتیجہ

سست لوڈنگ بنڈل کو تقسیم کرکے اور صرف ضرورت کے وقت کوڈ لوڈ کرکے کارکردگی کو بہتر بناتی ہے۔ یہاں ہم نے کیا سیکھا ہے:

• react.lazy() – کوڈ کی تقسیم کے لیے باقاعدہ React ایپس میں استعمال کیا جاتا ہے۔ مجھے ایک بنیادی برآمد کی ضرورت ہے اور یہ متحرک کے ساتھ کام کرتا ہے۔ import().

• سسپنس – سست جزو کو اس کے ساتھ لپیٹیں: Suspense اور fallback یہ لوڈ کی حیثیت کے بارے میں ہے۔

• غلطی کی حد – حصہ لوڈ کی ناکامیوں کو پکڑنے اور دوستانہ غلطی UI ظاہر کرنے کے لیے استعمال کیا جاتا ہے۔

• اگلا/متحرک – ایک جیسے فوائد کے علاوہ SSR کنٹرول اور Next.js میں بلٹ ان لوڈنگ آپشنز حاصل کریں۔

منتخب کریں React.lazy صرف ردعمل کے منصوبوں کے لیے next/dynamic Next.js کے لیے۔ ان کو یکجا کریں Suspense مضبوط سست لوڈنگ سیٹ اپ کے لیے خرابی کی حد۔

اپنے سب سے بھاری اجزاء (چارٹس، ماڈلز، ایڈمن پینلز) کی شناخت کرکے اور انہیں سستی سے لوڈ کرکے شروع کریں۔ اثر دیکھنے سے پہلے اور بعد میں اپنے بنڈل کے سائز اور بنیادی ویب وائٹلز کی پیمائش کریں۔

---

---

اگر آپ نے اب تک پڑھا ہے تو مصنف میں دلچسپی کا شکریہ۔ شکریہ