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