Sonraí Fetching agus Prefetching i Nuxt.js: Luchtú Ábhar a Bharrfheabhsú

fetching Is teicnící riachtanacha iad sonraí prefetching chun feidhmchláir dhinimiciúla agus fhreagracha a chruthú. In Nuxt.js, úsáidtear na teicníochtaí seo chun luchtú sonraí a bharrfheabhsú, cibé acu ar an bhfreastalaí nó ar an gcliant. San Airteagal seo, pléifimid conas sonraí fetching agus prefetching modhanna a úsáid agus a chur i gcomparáid i Nuxt.js, chomh maith le samplaí cód sonracha a sholáthar.

Treoir maidir le Sonraí Fetching agus Prefetching i Nuxt.js

Server-Side Sonraí Fetching:

In Nuxt.js, is féidir leat an asyncData modh a úsáid chun sonraí a fháil sula ndéanann tú leathanach ar an bhfreastalaí. Mar shampla, féachaimis conas is féidir linn sonraí a fháil ó API chun liosta postálacha a thaispeáint:

export default {  
  async asyncData() {  
    const response = await fetch('https://api.example.com/posts');  
    const data = await response.json();  
    return { posts: data };  
  }  
}  

Agus an leathanach á rochtain, gheofar sonraí postála agus beidh siad réidh le haghaidh server-side rindreála.

Sonraí Taobh an Chliaint Fetching:

Le haghaidh sonraí taobh cliaint fetching, bain úsáid as an fetch modh i gcomhpháirteanna nó i leathanaigh. Mar shampla, chun sonraí postála a thaispeáint nuair a chliceálann úsáideoir nasc:

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();  
  }  
}  

 

Sonraí Domhanda Prefetching:

Le haghaidh sonraí domhanda prefetching, cumraigh an nuxt.config.js comhad. Mar shampla, chun faisnéis úsáideora a réamhghabháil do gach leathanach:

export default {  
  prefetch: [  
    { url: '/user', as: 'user', data: { id: 1 } }  
  ]  
}  

Sonraí Leibhéil Comhpháirte Prefetching:

Úsáid an prefetch t-airí ag leibhéal an chomhpháirte. Mar shampla, chun sonraí a réamhghabháil le haghaidh míre liosta:

export default {  
  data() {  
    return {  
      items: []  
    };  
  },  
  prefetch() {  
    return this.items.map(item =>({  
      url: `/details/${item.id}`,  
      as: `details-${item.id}`,  
      data: item  
    }));  
  }  
}  

Conclúid

Is teicnící ríthábhachtacha iad sonraí fetching agus prefetching isteach Nuxt.js chun luchtú sonraí a bharrfheabhsú agus chun freagrúlacht feidhmchlár a fheabhsú. Trí na modhanna seo a chur i bhfeidhm go héifeachtach agus na difríochtaí idir cur server-side chuige agus cur chuige taobh an chliaint a thuiscint, is féidir leat eispéireas úsáideora níos míne agus feidhmíocht fheabhsaithe a chruthú i do Nuxt.js thionscadail.