Next.js/script

يُعد المكوّن 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، فإنه يبقى في شجرة DOM دون إمكانية إعادة تنفيذه إن جرى الوصول له.

استخدام استراتيجية 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"
      />
    </>
  )
}

أمثلة

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

المصادر

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