JavaScript التابع لجهات خارجية
يشير JavaScript التابع لجهات خارجية إلى أي نصوص برمجية يتم إضافتها من مصدر خارجي. عادةً ما يتم تضمين نصوص JavaScript التابعة لجهات خارجية لإدخال وظائف جديدة إلى موقع لا تحتاج إلى كتابتها من الصفر، مثل التحليلات والإعلانات وودجات دعم العملاء.
إضافة JavaScript التابع لجهات خارجية
دعونا نتعمق في كيفية إضافة نص برمجي تابع لجهة خارجية إلى صفحة Next.js.
افتح ملف pages/posts/first-post.js في محررك وابحث عن السطور التالية:
<Head>
<title>First Post</title>
</Head>بالإضافة إلى البيانات الوصفية، عادةً ما تتم إضافة النصوص البرمجية التي تحتاج إلى التحميل والتنفيذ في أسرع وقت ممكن داخل <head> الصفحة. باستخدام عنصر HTML العادي <script>، سيتم إضافة النص البرمجي الخارجي كما يلي:
<Head>
<title>First Post</title>
<script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>يحتوي هذا النص البرمجي على Facebook SDK الذي يُستخدم عادةً لإدخال ملحقات التواصل الاجتماعي من فيسبوك ووظائف أخرى. على الرغم من أن هذه الطريقة تعمل، فإن تضمين النصوص البرمجية بهذه الطريقة لا يعطي فكرة واضحة عن وقت تحميلها بالنسبة إلى كود JavaScript الآخر الذي يتم جلبها في نفس الصفحة. إذا كان نص برمجي معين يعيق التصيير ويمكنه تأخير تحميل محتوى الصفحة، فقد يؤثر هذا بشكل كبير على الأداء.
استخدام مكون Script
next/script هو امتداد لعنصر HTML <script> ويحسن وقت جلب وتنفيذ النصوص البرمجية الإضافية.
في نفس الملف، أضف استيراد Script من next/script في بداية الملف:
import Script from 'next/script';الآن، قم بتحديث مكون FirstPost لتضمين مكون Script:
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}لاحظ أنه تم تعريف بعض الخصائص الإضافية في مكون Script:
strategyتتحكم في وقت تحميل النص البرمجي التابع لجهة خارجية. قيمةlazyOnloadتخبر Next.js بتحميل هذا النص البرمجي المعين بشكل كسول خلال وقت الفراغ في المتصفحonLoadتُستخدم لتشغيل أي كود JavaScript مباشرة بعد انتهاء تحميل النص البرمجي. في هذا المثال، نقوم بتسجيل رسالة في وحدة التحكم تشير إلى أن النص البرمجي قد تم تحميله بشكل صحيح
جرب الوصول إلى http://localhost:3000/posts/first-post. باستخدام أدوات المطور في متصفحك، يجب أن ترى الرسالة أعلاه مسجلة في لوحة Console. بالإضافة إلى ذلك، يمكنك تشغيل window.FB لترى أن النص البرمجي قد ملأ هذا المتغير العام.
ملاحظة: تم استخدام Facebook SDK كمثال مصطنع فقط لإظهار كيفية إضافة نصوص برمجية تابعة لجهات خارجية إلى تطبيقك بطريقة فعالة. الآن بعد أن فهمت الأساسيات حول تضمين الوظائف التابعة لجهات خارجية في Next.js، يمكنك إزالة مكون Script من FirstPost قبل المتابعة.
لمعرفة المزيد عن مكون
Script، راجع الوثائق.