ڈیٹا Fetching اور Prefetching اس میں Nuxt.js: مواد کی لوڈنگ کو بہتر بنانا

ڈیٹا fetching اور prefetching متحرک اور ذمہ دار ویب ایپلیکیشنز بنانے کے لیے ضروری تکنیک ہیں۔ میں Nuxt.js ، ان تکنیکوں کو ڈیٹا لوڈنگ کو بہتر بنانے کے لیے استعمال کیا جاتا ہے، چاہے سرور پر ہو یا کلائنٹ پر۔ اس مضمون میں، ہم مخصوص کوڈ کی مثالیں فراہم کرنے کے ساتھ ساتھ ڈیٹا fetching اور prefetching طریقوں کو استعمال اور موازنہ کرنے کے طریقے پر تبادلہ خیال کریں گے ۔ Nuxt.js

ڈیٹا Fetching اور Prefetching اندر کے لیے ایک گائیڈ Nuxt.js

Server-Side ڈیٹا Fetching:

میں Nuxt.js ، آپ asyncData سرور پر صفحہ پیش کرنے سے پہلے ڈیٹا حاصل کرنے کے لیے طریقہ استعمال کر سکتے ہیں۔ مثال کے طور پر، آئیے دیکھتے ہیں کہ پوسٹس کی فہرست دکھانے کے لیے ہم API سے ڈیٹا کیسے حاصل کر سکتے ہیں:

export default {  
  async asyncData() {  
    const response = await fetch('https://api.example.com/posts');  
    const data = await response.json();  
    return { posts: data };  
  }  
}  

صفحہ تک رسائی حاصل کرتے وقت، پوسٹ کا ڈیٹا حاصل کیا جائے گا اور server-side رینڈرنگ کے لیے تیار ہو جائے گا۔

کلائنٹ سائڈ ڈیٹا Fetching:

کلائنٹ سائڈ ڈیٹا کے لیے fetching ، fetch طریقہ کار کو اجزاء یا صفحات میں استعمال کریں۔ مثال کے طور پر، جب صارف کسی لنک پر کلک کرتا ہے تو پوسٹ کی تفصیلات ظاہر کرنے کے لیے:

export default {  
  async fetch() {  
    const postId = this.$route.params.id;  
    const response = await fetch(`https://api.example.com/posts/${postId}`);  
    this.post = await response.json();  
  }  
}  

 

عالمی ڈیٹا Prefetching:

عالمی ڈیٹا کے لیے prefetching ، nuxt.config.js فائل کو کنفیگر کریں۔ مثال کے طور پر، تمام صفحات کے لیے صارف کی معلومات کو پیشگی حاصل کرنے کے لیے:

export default {  
  prefetch: [  
    { url: '/user', as: 'user', data: { id: 1 } }  
  ]  
}  

اجزاء کی سطح کا ڈیٹا Prefetching:

prefetch اجزاء کی سطح پر پراپرٹی کا استعمال کریں ۔ مثال کے طور پر، فہرست آئٹم کے لیے ڈیٹا کو پیشگی حاصل کرنے کے لیے:

export default {  
  data() {  
    return {  
      items: []  
    };  
  },  
  prefetch() {  
    return this.items.map(item =>({  
      url: `/details/${item.id}`,  
      as: `details-${item.id}`,  
      data: item  
    }));  
  }  
}  

نتیجہ

ڈیٹا لوڈنگ کو بہتر بنانے اور ایپلیکیشن کی ردعمل کو بہتر بنانے کے لیے ڈیٹا fetching اور prefetching ان اہم تکنیک ہیں۔ ان طریقوں کو مؤثر طریقے سے لاگو کرکے اور اور کلائنٹ سائیڈ اپروچز کے Nuxt.js درمیان فرق کو سمجھ کر ، آپ اپنے پراجیکٹس میں صارف کا ایک ہموار تجربہ اور بہتر کارکردگی بنا سکتے ہیں۔ server-side Nuxt.js