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

من موسوعة حسوب

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

النسخة التغييرات فيما يتعلق بتحميل السكرتات
v11.0.0 ظهور المكوّن next/script.

إليك طريقة استخدام المكوّن:

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" />
    </>
  )
}

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

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

يُسهّل المكوّن next/script على المطوّرين وضع سكربت من مصدر آخر في أي مكان من التطبيق دون الحاجة إلى التفكير بالاستراتيجيات أنسب لتحميله.

استخدام المكوّن Script في Next.js

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

import Script from 'next/script'

الخاصية strategy

يتيح لك استخدام المكوّن تحديد توقيت استخدام السكربتات من خلال الخاصية strategy:

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

هنالك ثلاث استراتيجيات مختلفة يمكن استخدامها لتحميل السكربتات:

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

استخدام استراتيجية beforeInteractive

تُدفع السكربتات التي تحمّل وفق هذه الاستراتيجية ضمن شيفرة HTML التي يوّلدها الخادم وتُنفَّذ قبل عملية التجميع الذاتي لشيفرة JavaScript. يجدر بك استخدام هذه الاستراتيجية مع السكربتات الحيوية التي ينبغي إحضارها وتنفيذها قبل أن يتمكن المستخدم من التفاعل مع الصفحة. تعمل هذه الاستراتيجية داخل الملف "document.js_" فقط، وقد صُمِّمت لتحميل السكربتات التي يحتاجها الموقع بأكمله (أي عندما يُفترض تحميل السكربت عند تحميل أي صفحة في التطبيق من جانب الخادم).

إن سبب عمل الاستراتيجية beforeInteractive ضمن الملف document.js_\ هو دعم التدفق المستمر والتفاعلي للبيانات، فمن المستحيل أن تضمن توقيت تنفيذ سكربتات beforeInteractive أو ترتيبها خارج هذا الملف.

// In _document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script
          src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
          strategy="beforeInteractive"
        ></Script>
      </body>
    </Html>
  )
}

من السكربتات التي ينبغي تحملها وفق هذه الاستراتيجية نجد:

  • مكتشفات المؤتمِتات Bot detectors
  • مديرو قبول ملفات تعريف الارتباط.

استخدام استراتيجية afterInteractive

تُدفع بالسكربتات التي تستخدم هذه الاستراتيجية إلى جانب العميل وتُنفَّذ بعد أن ترطِّب Next.js الصفحة (بعد أن تحلل شيفرة JavaScript). ينبغي استخدام هذه الاستراتيجية مع السكربتات التي لا نحتاج إلى تحميلها بأقصى سرعة ويمكن أن نحضرها وننفذها بعد أن تغدو الصفحة تفاعلية مع المستخدم:

<Script
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-XXXXXX');
  `,
  }}
/>

من السكربتات التي تُعد أمثلة جيدة عن هذه الحالة نجد:

  • مديرو الوسوم Tag managers
  • المحللات Analytics

استخدام الاستراتيجية lazyOnload

تُحمّل السكربتات وفق هذه الاستراتيجية بعد إحضار كل الموارد وأثناء وقت الراحة (التوقف عن العمل). ينبغي استخدام هذه الاستراتيجية في الخلفية أو للسكربتات ذات الأولوية المنخفضة التي لا حاجة لتحميها مباشرة قبل أو بعد أن تغدو الصفحة تفاعلية:

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

من السكربتات التي تُعد أمثلة جيدة عن هذه الحالة نجد:

  • الإضافات التي تدعم المحادثات.
  • أدوات الارتباط بمواقع التواصل الاجتماعي.

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

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

يُحدَّد موقع السكربتات التي تستخدم هذه الاستراتيجية وتُنفَّذ بواسطة Partytown، وقد يُحسِّن ذلك أداء الموقع بتخصيص الخيط الأساسي لتنفيذ شيفرة التطبيق الأساسية. لا تزال هذه الاستراتيجية تجريبية، ولا يمكن استخدامها دون تمكين الراية 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 تلقائيًا إلى تطبيقك وتبدأ بتحميل السكربت جانبيًا ضمن خيط عامل ويب.

<Script src="https://example.com/analytics.js" strategy="worker" />

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

تهيئة الاستراتيجية worker للعمل

على الرغم من عدم حاجة هذه الاستراتيجة إلى إعدادات خاصة لتعمل، يدعم Partytown استخدام كائن تهيئة config object لتعديل بعض إعداداته بما في ذلك نمط التنقيح debug وتوجيه الأحداث forwarding events ومسببات الأحداث triggers.

إن رغبت في إضافة إعدادات أخرى، بإمكانك تضمينها داخل المكوّن </ Head> الذي يُستخدم في ملف document.js_ مخصص:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

لا بد من تحقيق الشروط التالية إن أردت تعديل إعدادات Partytown:

  1. استخدام السمة data-partytown-config لإلغاء الإعدادات الافتراضية التي تستخدمها Next.js.
  2. استخدام الخاصية التالية "/lib: "/_next/static/~partytown ضمن كائن التهيئة لكي يعرف Partytown أين تخزّن Next.js الملفات الساكنة الضرورية. وهذا الأمر غير ضروري إن أردت تخزين ملفات مكتبة Partytown في مجلد مستقل.

ملاحظة: إن كنت تستخدم asset prefix وأردت تعديل إعدادات Partytown الافتراضية، عليك تضمينها كجزء من مسار الخاصية lib.

السكربتات السطرية في Next.js

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

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

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

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

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

تنفيذ الشيفرة بعد التحميل onLoad في Next.js

ملاحظة: لا تستخدم كلتا الخاصيتين onLoad و onError مع استراتيجية التحميل beforeInteractive

تتطلب بعد السكربتات التي يقدمها طرف آخر تنفيذ شيفرة JavaScript بعد أن ينتهي تحميل تلك السكربتات، وذلك كي تنسخ محتوى معين أو تستدعي دالة. فإن كنت تستخدم إحدى استراتيجيتي التحميل afterInteractive أو lazyOnload بإمكانك تنفيذ الشيفرة بعد تحميلها من خلال استخدام الخاصية onLoad:

import { useState } from 'react'
import Script from 'next/script'

export default function Home() {
  const [stripe, setStripe] = useState(null)

  return (
    <>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          setStripe({ stripe: window.Stripe('pk_test_12345') })
        }}
      />
    </>
  )
}

وقد يساعدك أحيانًا التقاط الأخطاء الناتجة عن فشل التحميل ومعالجتها باستخدام الخاصية onError:

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        id="will-fail"
        src="https://example.com/non-existant-script.js"
        onError={(e) => {
          console.error('Script failed to load', e)
        }}
      />
    </>
  )
}

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

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

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        src="https://www.google-analytics.com/analytics.js"
        id="analytics"
        nonce="XUENAJFW"
        data-test="analytics"
      />
    </>
  )
}

المصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js/script&oldid=31953»