پیش واکشی مسیر در Next.js

چگونه Next.js با پیش‌واکشی مسیر، سرعت پیمایش را افزایش می‌دهد و چگونه می‌توان آن را سفارشی‌سازی کرد.

میلیکا میهایلیا
Milica Mihajlija
X GitHub Homepage

در این پست، یاد می‌گیرید که مسیریابی در Next.js چگونه کار می‌کند، چگونه برای سرعت بهینه شده است و چگونه آن را متناسب با نیازهای خود سفارشی کنید.

در Next.js ، نیازی به تنظیم دستی مسیریابی ندارید. Next.js از مسیریابی مبتنی بر سیستم فایل استفاده می‌کند که به شما امکان می‌دهد فایل‌ها و پوشه‌ها را درون دایرکتوری ./pages/ ایجاد کنید:

دایرکتوری Pages که شامل سه فایل است: index.js، margherita.js و pineapple-pizza.js.

برای لینک دادن به صفحات مختلف، از کامپوننت <Link> استفاده کنید، مشابه نحوه‌ی استفاده از عنصر قدیمی و خوب <a> :

<Link href="/margherita">
  <a>Margherita</a>
</Link>

وقتی از کامپوننت <Link> برای ناوبری استفاده می‌کنید، Next.js کمی بیشتر برای شما کار می‌کند. معمولاً وقتی لینکی را دنبال می‌کنید، یک صفحه دانلود می‌شود، اما Next.js به طور خودکار جاوا اسکریپت مورد نیاز برای رندر صفحه را از قبل واکشی می‌کند.

وقتی صفحه‌ای را با چند لینک بارگذاری می‌کنید، احتمالاً تا زمانی که روی یک لینک کلیک کنید، کامپوننت پشت آن قبلاً دریافت شده است. این امر با سریع‌تر کردن پیمایش به صفحات جدید، پاسخگویی برنامه را بهبود می‌بخشد.

در برنامه‌ی مثال، صفحه‌ی index.js با یک <Link> به margherita.js لینک می‌شود:

از Chrome DevTools برای تأیید پیش‌دریافت فایل margherita.js استفاده کنید: ۱. برای پیش‌نمایش سایت، View App را فشار دهید. سپس Fullscreen را فشار دهید. تمام صفحه .

  1. ابزارهای توسعه کروم را باز کنید .
  2. روی برگه شبکه کلیک کنید.
  3. کادر غیرفعال کردن حافظه پنهان را علامت بزنید.
  4. صفحه را دوباره بارگذاری کنید.

وقتی index.js را بارگذاری می‌کنید، تب Network نشان می‌دهد که margherita.js نیز دانلود شده است:

تب شبکه DevTools که فایل margherita.js در آن هایلایت شده است.

نحوه‌ی عملکرد پیش‌واکشی خودکار

Next.js فقط لینک‌هایی را که در viewport ظاهر می‌شوند، پیش‌واکشی می‌کند و از Intersection Observer API برای شناسایی آنها استفاده می‌کند. همچنین وقتی اتصال شبکه کند است یا وقتی کاربران Save-Data روشن کرده‌اند، پیش‌واکشی را غیرفعال می‌کند. بر اساس این بررسی‌ها، Next.js به صورت پویا تگ‌های <link rel="preload"> را برای دانلود کامپوننت‌ها برای پیمایش‌های بعدی تزریق می‌کند.

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

از پیش‌واکشی غیرضروری خودداری کنید

برای جلوگیری از دانلود محتوای غیرضروری، می‌توانید با تنظیم ویژگی prefetch در <Link> به false ، پیش‌واکشی را برای صفحاتی که به ندرت بازدید می‌شوند غیرفعال کنید:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

در این برنامه نمونه دوم، صفحه index.js دارای یک <Link> به pineapple-pizza.js است که prefetch آن روی false تنظیم شده است:

برای بررسی فعالیت شبکه، مراحل مثال اول را دنبال کنید. وقتی index.js را بارگذاری می‌کنید، تب DevTools Network نشان می‌دهد که margherita.js دانلود شده است، اما pineapple-pizza.js دانلود نشده است:

تب شبکه DevTools که فایل margherita.js در آن هایلایت شده است.

پیش واکشی با مسیریابی سفارشی

کامپوننت <Link> برای اکثر موارد استفاده مناسب است، اما می‌توانید کامپوننت خودتان را نیز برای انجام مسیریابی بسازید. Next.js این کار را با API روتر موجود در next/router برای شما آسان‌تر می‌کند. اگر می‌خواهید قبل از پیمایش به یک مسیر جدید کاری انجام دهید (مثلاً ارسال فرم)، می‌توانید آن را در کد مسیریابی سفارشی خود تعریف کنید.

وقتی از کامپوننت‌های سفارشی برای مسیریابی استفاده می‌کنید، می‌توانید پیش‌واکشی را نیز به آنها اضافه کنید. برای پیاده‌سازی پیش‌واکشی در کد مسیریابی خود، از متد prefetch از useRouter استفاده کنید.

به components/MyLink.js در این برنامه‌ی نمونه نگاهی بیندازید:

پیش واکشی (prefetching) درون قلاب useEffect انجام می‌شود. اگر ویژگی prefetch در <MyLink> روی true تنظیم شده باشد، مسیر مشخص شده در ویژگی href هنگام رندر شدن <MyLink> پیش واکشی می‌شود:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

وقتی روی لینک کلیک می‌کنید، مسیریابی در handleClick انجام می‌شود. پیامی در کنسول ثبت می‌شود و متد push به مسیر جدیدی که در href مشخص شده است، هدایت می‌شود:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

در این برنامه نمونه، صفحه index.js دارای یک <MyLink> به margherita.js و pineapple-pizza.js است. ویژگی prefetch در /margherita روی true و در /pineapple-pizza روی false تنظیم شده است.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

وقتی index.js را بارگذاری می‌کنید، تب Network نشان می‌دهد که margherita.js دانلود شده و pineapple-pizza.js دانلود نشده است:

تب شبکه DevTools که فایل margherita.js در آن هایلایت شده است.

وقتی روی هر یک از لینک‌ها کلیک می‌کنید، کنسول عبارت «Having fun with Next.js» را ثبت می‌کند و به مسیر جدید هدایت می‌شود:

کنسول DevTools پیام «با Next.js خوش می‌گذرانیم» را نمایش می‌دهد.

نتیجه‌گیری

وقتی از <Link> استفاده می‌کنید، Next.js به طور خودکار جاوا اسکریپت مورد نیاز برای رندر صفحه لینک شده را پیش‌واکشی می‌کند، که این امر پیمایش به صفحات جدید را سریع‌تر می‌کند. اگر از مسیریابی سفارشی استفاده می‌کنید، می‌توانید از API روتر Next.js برای پیاده‌سازی پیش‌واکشی خودتان استفاده کنید. با غیرفعال کردن پیش‌واکشی برای صفحاتی که به ندرت بازدید می‌شوند، از دانلود غیرضروری محتوا جلوگیری کنید.