डेटा 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.