بهینه سازی اسکریپت Script

اسکریپت‌های طرح بندی Layout Scripts

برای بارگذاری یک اسکریپت شخص ثالث برای چندین مسیر، next/script را ایمپورت کنید و اسکریپت را مستقیماً در کامپوننت طرح بندی (layout) خود قرار دهید:

app/dashboard/layout.tsx

import Script from 'next/script'
 
export default function DashboardLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<>
			<section>{children}</section>
			<Script src="https://example.com/script.js" />
		</>
	)
}

اسکریپت شخص ثالث زمانی که کاربر به مسیر پوشه (مثلا dashboard/page.js) یا هر مسیر تودرتو (مثلا dashboard/settings/page.js) دسترسی پیدا می‌کند، فراخوانده می‌شود. Next.js اطمینان می‌دهد که اسکریپت تنها یک بار بارگذاری می‌شود، حتی اگر کاربر بین چندین مسیر در همان طرح بندی پیمایش کند.

اسکریپت های کاربردی

برای بارگیری یک اسکریپت شخص ثالث برای تمام مسیرها، next/script را ایمپورت کنید و اسکریپت را مستقیماً در طرح بندی ریشه (root layout) خود قرار دهید:

app/layout.tsx

import Script from 'next/script'
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en">
			<body>{children}</body>
			<Script src="https://example.com/script.js" />
		</html>
	)
}

اسکریپت شخص ثالث زمانی که به هر مسیری در برنامه شما دسترسی پیدا شود، بارگذاری و اجرا می‌شود. Next.js اطمینان می‌دهد که اسکریپت تنها یک بار بارگذاری می‌شود، حتی اگر کاربر بین چندین صفحه پیمایش کند.

توصیه: برای به حداقل رساندن تأثیر غیرضروری بر عملکرد، توصیه می‌کنیم اسکریپت‌های شخص ثالث را تنها در صفحات یا طرح بندی های خاصی قرار دهید.

استراتژی

در حالی که رفتار پیش فرض next/script به شما امکان می‌دهد اسکریپت‌های شخص ثالث را در هر صفحه یا طرح بندی بارگذاری کنید، می‌توانید رفتار بارگذاری آن را با استفاده از ویژگی strategy تنظیم کنید:

beforeInteractive: اسکریپت را قبل از هر کد Next.js و قبل از هر hydration صفحه بارگذاری کنید.
afterInteractive: (پیش فرض) اسکریپت را زودهنگام اما پس از مقداری hydration در صفحه بارگذاری کنید.
lazyOnload: اسکریپت را بعداً در زمان بیکاری مرورگر بارگذاری کنید.
worker: (آزمایشی) اسکریپت را در یک web worker بارگذاری کنید.

برای اطلاعات بیشتر در مورد هر استراتژی و موارد استفاده آنها، به مستندات مرجع API next/script مراجعه کنید.

اسکریپت‌های برون‌سپاری شده به Web Worker (آزمایشی)

هشدار: استراتژی worker هنوز پایدار نیست و هنوز با دایرکتوری app کار نمی کند. با احتیاط استفاده کنید.

اسکریپت‌هایی که از استراتژی worker استفاده می‌کنند با Partytown (opens in a new tab) تخلیه و در یک web worker اجرا می‌شوند. این کار با اختصاص دادن نخ اصلی به بقیه کدهای برنامه شما می‌تواند عملکرد سایت شما را بهبود بخشد.

این استراتژی هنوز آزمایشی است و تنها در صورتی قابل استفاده است که پرچم nextScriptWorkers در next.config.js فعال شود:

next.config.js

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

سپس دستور next را اجرا کنید (معمولاً npm run dev یا yarn dev) و Next.js شما را در نصب پکیج های مورد نیاز برای تکمیل راه‌اندازی راهنمایی می‌کند:

Terminal

npm run dev

شما دستوراتی شبیه به این را مشاهده خواهید کرد: لطفاً Partytown را نصب کنید با اجرای دستور npm install @builder.io/partytown

پس از تکمیل راه‌اندازی، تعریف strategy="worker" به طور خودکار Partytown را در برنامه شما راه‌اندازی می‌کند و اسکریپت را به یک web worker برون‌سپاری می‌کند.

pages/home.tsx

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

هنگام بارگذاری یک اسکریپت شخص ثالث در یک web worker، نکات مثبت و منفی‌ای وجود دارد که باید در نظر گرفته شوند. لطفاً برای اطلاعات بیشتر به مستندات tradeoffs (opens in a new tab) Partytown مراجعه کنید.

اسکریپت‌های درون‌خطی

اسکریپت‌های درون‌خطی، یا اسکریپت‌هایی که از یک فایل خارجی بارگیری نمی‌شوند، نیز توسط کامپوننت 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 بتواند اسکریپت را پیگیری و بهینه‌سازی کند.

اجرای کد اضافی

از هندلرها می‌توان با کامپوننت Script برای اجرای کد اضافی پس از وقوع رویداد خاصی استفاده کرد:

onLoad: اجرای کد پس از اتمام بارگذاری اسکریپت.
onReady: اجرای کد پس از اتمام بارگذاری اسکریپت و هر بار که کامپوننت mount می‌شود.
onError: اجرای کد در صورت عدم بارگذاری اسکریپت.

این هندلرها فقط زمانی کار می‌کنند که next/script ایمپورت شده و داخل یک کامپوننت سمت کلاینت Client Component استفاده شود که در آن "use client" به عنوان اولین خط کد تعریف شده باشد:

app/page.tsx

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

به مرجع API next/script برای اطلاعات بیشتر در مورد هر event handler و مشاهده نمونه‌ها مراجعه کنید.

ویژگی های اضافی

بسیاری از ویژگی‌های DOM وجود دارند که می‌توان آن‌ها را به یک تگ <script> اختصاص داد که توسط کامپوننت Script استفاده نمی‌شوند، مانند nonce (opens in a new tab) یا ویژگی‌های داده سفارشی (opens in a new tab). قرار دادن هرگونه ویژگی اضافی به طور خودکار آن را به تگ نهایی و بهینه شده <script> که در HTML گنجانده شده است، منتقل می‌کند.

app/page.tsx

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

Metadata آنالیز Bundle