الفرق بين المراجعتين لصفحة: «Next.js/script»

مراجعة 06:43، 21 مايو 2022

يُعد المكوّن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" />
    </>
  )
}

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

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

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

استخدام المكوّن 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 وسترشدك خلال عملية تثبيت الحزم اللازمة لإتمام الأمر:

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>
  )
}

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

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

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

للاطلاع على مزيد من إعدادت التهيئة لمكتبة Partytown راجع التوثيق الخاص بها.

السكربتات السطرية في 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 من توثيق Next.js الرسمي

@@ سطر 1: / سطر 1: @@
-= التعامل مع السكربتات في Next.js =
+<noinclude>{{DISPLAYTITLE:التعامل مع السكربتات في Next.js}}</noinclude>
 يُعد المكوّن<code>next/script</code> في Next.js امتدادًا للعنصر <code><script></code> في HTML. ويتيح هذا المكوّن للمطورين تحديد أولوية تحميل السكربتات التي مصدرها طرف آخر في التطبيق خارج المكوّن <code>next/head</code> موفرًا بذلك الوقت ومحسنًا أداء التطبيق من ناحية التحميل.
 {| class="wikitable"