‏ناوبری آنی در Next.js 16.3

تیم Next.js تو یه پست تازه نشون می‌ده Instant Navigations که با نسخهٔ ۱۶.۳ اومد، عملا چطور کار می‌کنه. دو تا قابلیت پشتشن: Cache Components که تضمین می‌کنه هر مسیر یه UI آمادهٔ نمایش فوری داره، و Partial Prefetching که همون UI رو قبل از کلیک کاربر می‌رسونه به مرورگر. حاصلش حس یه اپلیکیشن تک‌صفحه‌ایه بدون این‌که از Server Components دست بکشی.

برای نشون دادن ماجرا چهار تا اپ نمونه ساختن: پخش‌کنندهٔ موسیقی Next Beats، شبکهٔ اجتماعی Drop، تقویم Flow و چت تیمی Huddle. روشن کردن هر دو قابلیت هم دو خط تنظیماته:

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};

بعد از این، هر که تو دید کاربر باشه یه App Shell از مقصد رو از قبل می‌گیره و لینک‌های هم‌مسیر همون یکی رو با هم شریک می‌شن.

لایهٔ بعدی کشه. با گذاشتن 'use cache' روی یه تابع خواندن داده، Next.js نتیجه رو نگه می‌داره و آرگومان‌های تابع بخشی از کلید کش می‌شن. cacheLife تعیین می‌کنه نتیجه چقدر تازه بمونه و cacheTag بهش برچسب می‌زنه:

async function getDrop(id: string) {
  'use cache';
  cacheLife('minutes');
  cacheTag('drops', `drop-${id}`);
  const row = await prisma.drop.findUnique({ where: { id } });
  return toDrop(row);
}

همون برچسب بعدا به کار می‌آد: Server Action بعد از نوشتن، با updateTag منقضی‌ش می‌کنه تا صفحه‌های دیگه هم به‌روز بشن.

به‌صورت پیش‌فرض پرفچ فقط پوستهٔ مسیر رو می‌گیره، ولی اگه prefetch={true} رو روی یه لینک بذاری، params و searchParams و کل URL هم قبل از کلیک حل می‌شن، پس صفحهٔ جزئیات با محتواش می‌آد بالا. نکتهٔ مهمی که تو مقاله هشدار داده شده اینه که چنین لینکی همین که وارد دید کاربر بشه سرور رو صدا می‌زنه، پس فقط جایی ازش استفاده کن که آماده بودن محتوا ارزش اون درخواست رو داره.

دو تا بخش دیگه‌ش هم برای حس اپلیکیشنی مهمن. با فعال بودن offline retry، یه ناوبری نرم یا فچ RSC یا Server Action که به خاطر قطعی شکست بخوره به‌جای ارور دادن معلق می‌مونه و خودش دوباره تلاش می‌کنه، و هوک useOffline بهت اجازه می‌ده نوار «در حال اتصال دوباره» رو نشون بدی. برای استریم هم پیشنهادشون تودرتو کردن مرزهای Suspense ـه تا بخش‌ها از بالا به پایین بشینن و صفحه موقع لود شدن جابه‌جا نشه.

نکات کلیدی:

• Instant Navigations تو Next.js 16.3 روی دو ستون سواره: Cache Components و Partial Prefetching.
• فعال‌سازی با cacheComponents: true و partialPrefetching: true تو next.config.ts انجام می‌شه.
• 'use cache' به‌همراه cacheLife و cacheTag داده رو کش می‌کنه و updateTag تو Server Action منقضی‌ش می‌کنه.
• prefetch={true} علاوه بر پوسته، محتوای وابسته به URL رو هم قبل از کلیک می‌گیره، ولی به ازای یه درخواست سرور به محض دیده‌شدن لینک.
• هوک useOffline وضعیت قطعی رو گزارش می‌ده تا درخواست‌های ناموفق خودکار دوباره اجرا بشن.