التعامل مع السكربتات في Next.js

يُعد المكوّن next/script في Next.js امتدادًا للعنصر <script> في HTML. ويتيح هذا المكوّن للمطورين تحديد أولوية تحميل السكربتات التي مصدرها طرف آخر خارجي في تطبيقاتهم موفرين بذلك الوقت ومحسنين أداء التطبيق من ناحية التحميل.

مقدمة

تستخدم مواقع ويب أحيانًا سكربتات يكتبها طرف آخر خارجي لإضافة وظائف مختلفة إلى تلك المواقع مثل التحليلات الإحصائية والإعلانات وأدوات دعم العملاء وإدارة القبولات. لكن قد يسبب ذلك مشاكل تؤثر على تجربة المستخدم والمطوّر:

• بطء تحميل بعض سكربتات الطرف الآخر مما ينعكس سلبًا على الأداء وعلى تجربة المستخدم وخاصة إن أعاقت عرض بعض الأجزاء وأخّرت تحميل محتوى أجزاء أخرى من الصفحة.
• صعوبة اختيار الموقع والوقت المناسب لتحميل السكربت في التطبيق للتأكد من تحميل الموقع وعرضه بالشكل الأمثل.

تحمل المتصفحات عادةً عناصر محتوى العنصر <script> بناءً على ترتيب موقعها في صفحة HTML التي تحللها وبناءً على استخدام الخاصية async أو الخاصية defer معه إلا أن التحدي الأكبر في استعمال العنصر <script> الذي توفره HTML مباشرة يكمن في ما يلي:

• كلما كبر التطبيق وزاد تعقيده، زادت صعوبة إدارة تحميل السكربتات الخارجية.
• تحسن خاصية الإرسال الدفقي streaming والانتظار suspense التي توفرها Next.js عملية تحميل الصفحة وعرضها تدريجيًا بمجرد ما يصبح المحتوى جاهزًا للعرض إلا أن هذه الآلية غير متوافقة مع استعمال العنصر <script> مع بعض خاصياته (مثل defer) دون إنجاز بعض الأمور.

يحل مكوّن السكربت الذي توفره Next.js عبر next/script تلك المشاكل عبر توفير واجهة API تبين كيفية تحميل السكربتات الخارجية، إذ يوفر مجموعة من آليات التحميل الجاهزة التي يمكن استخدامها لتحسين تحميل طابور السكربتات مع دعم الإرسال الدفقي streaming، وتضمن هذه الآليات استخدام أفضل ما في مكتبة ريآكت React وما توفره واجهات الويب Web API لتحميل السكربتات بأقل تأثير على أداء الصفحة.

استخدام المكون Script

أدرج المكوّن next/script إن اردت استخدام سكربت من طرف آخر بالشكل التالي:

import Script from 'next/script'

تحميل سكربت على في صفحة

إن أردت تحميل سكربت في صفحة محددة ضمن تطبيقك، فاستورد next/script داخل مكون الصفحة مباشرة واستعلمه مباشرةً:

import Script from 'next/script'

export default function Dashboard() {
  return (
    <>
      <Script src="https://example.com/script.js" />
    </>
  )
}

سيُحمَّل السكربت ويُنفَّذ بمجرد زيارة المتصفح تلك الصفحة فقط وتحميلها.

تحميل سكربت في كل الصفحات

أما إن أردت تحميل سكربت خارجي في كل الصفحات أي على مستوى كل التطبيق، فاستورد next/script مباشرةً ضمن الملف pages/_app.js:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script src="https://example.com/script.js" />
      <Component {...pageProps} />
    </>
  )
}

سيُحمَّل السكرتب ويُنفَّف بمجرد زيارة أي صفحة في تطبيقكـ وستتأكد Next.js من تحميل السكربت مرة واحدة فقط حتى لو تنقل المستخدم بين عدة صفحات مختلفة.

ملاحظة: نادرًا ما ستحتاج إلى تحميل سكربت على مستوى التطبيق كله في كل صفحاته، وننصح دومًا بتجنب هذا السلوك والاقتصار على تحميل السكربتات الخارجية على مستوى الصفحات فقط لتقليل أي أثر سلبي يصيب الأداء.

الخاصية strategy

رغم أن السلوك الافتراضي للسكربت الذي توفره Next.js يسمح لك بتحميل سكربتات خارجية في أي صفحة إلا أنه يوفر لك وسيلة لتحديد استراتيجية التحميل تلك وذلك عبر الخاصية strategy التي تأخذ إحدى القيم التالية التي تمثل آليات التحميل:

• beforeInteractive: تحميل السكربت قبل أن تغدو الصفحة تفاعلية مع المستخدم.
• afterInteractive: (الطريقة الافتراضية) تحميل السكربت بعد أن تغدو الصفحة تفاعلية مباشرة.
• lazyOnload: تحميل السكربت لاحقًا أثناء فترة خمول المتصفح idle.
• worker: (تجريبية) تحميل السكربت عبر عامل ويب web worker.

إن أردت معرفة معلومات أكثر حول كل آلية وحالات استخدامها، فارجع إلى توثيق next/script.

ملاحظة: بمجرد تحميل المتصفح للسكربت next/script، فإنه يبقى في شجرة DOM دون إمكانية إعادة تنفيذه إن جرى الوصول له.

التحميل الجانبي للسكربت باستخدام عامل ويب (استراتيجية تجريبية)

ملاحظة: لا تزال هذه الاستراتيجية تجريبية وغير مستقرة وقد تسبب أخطاءً غير متوقعة بالإضافة إلى أنها لا تعمل مع المجلد /app لذك استخدمها بحذر.

يُحدَّد موقع السكربتات التي تستخدم هذه الاستراتيجية وتُنفَّذ بواسطة عامل ويب مع Partytown، وقد يُحسِّن ذلك أداء الموقع بتخصيص الخيط الأساسي main thread لتنفيذ شيفرة التطبيق الأساسية فقط، ولا تزال هذه الاستراتيجية تجريبية، ولا يمكن استخدامها دون تمكين الراية nextScriptWorkers في الملف next.config.js:

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

نفّذ بعد ذلك أحد الأمرين npm run dev أو yarn dev وسترشدك Next.js إلى عملية تثبيت الحزم اللازمة لإتمام الأمر:

npm run dev

# سترى إرشادات كالتالي
#
# Please install Partytown by running:
#
#         npm install @builder.io/partytown
#
# ...

بعد أن يكتمل التثبيت، سيؤدي استخدام strategy="worker"‎ إلى نسخ ما يلزمك من مكتبة Partytown تلقائيًا إلى تطبيقك التي تبدأ بتحميل السكربت جانبيًا ضمن خيط عامل ويب أثناء عمل تطبيقك في المتصفح.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

ينبغي الإشارة إلى وجود بعض الآثار الجانبية لتحميل سكربتات خارجية في عامل ويب، وبإمكانك العودة إلى توثيق Partytown لمعلومات أكثر.

السكربتات السطرية Inline Scripts

يدعم المكوّن </ Script> السكربتات السطرية أو تلك التي لا تحمّل من ملفات خارجية. إذ يمكن كتابتها ضمن القوسين المعقوصين داخل المكوّن:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

أو من خلال استعمال الخاصية dangerouslySetInnerHTML:

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

لا بد من استخدام الخاصية id في السكربتات السطرية كي تتبع Next.js السكربت وتحسن أداءه.

تنفيذ مهام إضافية مع السكربت

تتطلب بعد السكربتات التي يقدمها طرف آخر خارجي تنفيذ شيفرة JavaScript عند وقوع أحداث معينة مثلًا بعد أن ينتهي تحميل السكربت، وذلك لتنفيذ مهام إضافية تكمِّل عمل السكربت والأحداث التي يدعمها سكربت Next.js تتمثل في الخاصيات التالية:

• onLoad: تأخذ دالة تُستدعى بعد انتهاء تحميل السكربت.
• onReady: تأخذ دالة تُستدعى بعد انتهاء تحميل السكربت وفي كل مرة يضاف فيها المكون mounted.
• onError: تأخذ دالة تُنفَّذ إن فشل تحميل السكربت.

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

عد إلى توثيق الواجهة البرمجية next/script لمعلومات أوسع حول معالجة كل حدث من تلك الأحداث.

استخدام سمات إضافية

هنالك العديد من سمات شجرة DOM الخاصة بالعنصر <script> ولكن لا يستخدمها المكوّن </ Script> مثل nonce أو سمات البيانات المخصصة، لذا ستُحوَّل تلقائيًا أي سمات إضافية إلى العنصر <script> النهائي المحسّن والذي سيُضمَّن في صفحة HTML.

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}

أمثلة

• Script Component
• Google Tag Manager
• Google Analytics
• Facebook Pixel
• Clerk
• Segment Analytics

المصادر

• الصفحة Script Component من توثيق Next.js الرسمي.