தரவு 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.