البيانات 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.