close

डेटा Fetching और Prefetching इन Nuxt.js: सामग्री लोडिंग को अनुकूलित करना

गतिशील और प्रतिक्रियाशील वेब एप्लिकेशन बनाने के लिए डेटा fetching और prefetching आवश्यक तकनीकें हैं। में Nuxt.js, इन तकनीकों का उपयोग डेटा लोडिंग को अनुकूलित करने के लिए किया जाता है, चाहे सर्वर पर हो या क्लाइंट पर। इस लेख में, हम विशिष्ट कोड उदाहरण प्रदान करने के साथ-साथ डेटा fetching और prefetching विधियों का उपयोग और तुलना करने के तरीके पर चर्चा करेंगे । Nuxt.js

डेटा Fetching और Prefetching इन के लिए एक गाइड Nuxt.js

Server-Side डेटा Fetching:

में Nuxt.js, आप asyncData सर्वर पर पेज रेंडर करने से पहले डेटा लाने के लिए विधि का उपयोग कर सकते हैं। उदाहरण के लिए, आइए देखें कि हम पोस्ट की सूची प्रदर्शित करने के लिए एपीआई से डेटा कैसे प्राप्त कर सकते हैं:

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 परियोजनाओं में बेहतर प्रदर्शन बना सकते हैं।