ਡੇਟਾ 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 ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਇੱਕ ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਅਤੇ ਬਿਹਤਰ ਪ੍ਰਦਰਸ਼ਨ ਬਣਾ ਸਕਦੇ ਹੋ।