‏تیم v0 چطور با Next.js 16.4 ناوبری رو سریع‌تر کرد

تیم Vercel تو این پست تعریف کرده که چطور تجربهٔ ناوبری تو v0 (ابزار ساخت اپ با هوش مصنوعی Vercel) رو بهتر کرده. مشکل این بود که کاربر وقتی به صفحه‌ای که قبلاً باز کرده بود برمی‌گشت، دوباره loading skeleton (یعنی اون قالب خاکستری که جای محتوا نشون داده می‌شه) می‌دید. هدف این بود که صفحه‌ها مثل یه SPA رفتار کنن: محتوا موقع رفتن از قبل آماده باشه و تو برگشت هم سر جاش بمونه.

ابزار اصلی Partial Prefetching هست که تو Next.js 16.3 اومد. قبلاً prefetch={true} کل صفحهٔ مقصد رو با محتوای داینامیکش می‌گرفت، یعنی صفحه‌هایی رو هم می‌گرفت که کاربر هیچ‌وقت بازشون نمی‌کرد، و اگه قبل از تموم شدن prefetch کلیک می‌کردی، باز هم ناوبری کند بود. حالا Next.js فقط بخش‌های قابل‌استفادهٔ مجدد مسیر رو از قبل می‌گیره و بقیه موقع ناوبری لود می‌شه. از Next.js 16.4 به بعد، create-next-app این قابلیت و Cache Components رو به‌صورت پیش‌فرض روشن می‌کنه:

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

برای اینکه هدف قابل‌اندازه‌گیری باشه، از helper پلی‌رایت به اسم instant() استفاده کردن. این تابع دور کلیک یه قفل می‌ذاره و محتوایی که فقط بعد از کلیک می‌رسه رو نگه می‌داره، تا تست بتونه چک کنه چی قبل از کلیک آماده بوده. Skill جدید next-partial-prefetching-optimizer تو Next.js 16.4 یه ایجنت رو تو یه حلقه می‌بره: تست بنویس، مطمئن شو شکست می‌خوره، اپ رو با کش و prefetch بازنویسی کن، دوباره تست رو اجرا کن تا پاس بشه. تست هم تو کدبیس می‌مونه و تو CI جلوی برگشت مشکل رو می‌گیره.

مثلاً برای صفحهٔ /templates/[id]، ایجنت دادهٔ عمومی قالب رو از وضعیت شخصی کاربر جدا کرد و دادهٔ عمومی رو با 'use cache: remote' کش کرد. روی Vercel این داده تو Runtime Cache ذخیره می‌شه و بین کاربرها و instanceها مشترکه. با cacheLife() عمر کش و با cacheTag() کلید باطل‌کردنش تعیین شد و موقع انتشار قالب، revalidateTag() صدا زده می‌شه.

اما اولین نسخه برای همهٔ کارت‌های قابل‌دیدن تو grid هم prefetch سنگین شروع می‌کرد و تعداد درخواست‌های prefetch به /templates/[id] حدود ۲.۹ برابر شد. پس ایجنت prefetch کامل رو منوط به نیت کاربر کرد، یعنی فقط موقع hover، focus یا لمس شروع بشه:

<Link
  href={href}
  prefetch={intent ? true : 'auto'}
  onMouseEnter={() => setIntent(true)}
  onFocus={() => setIntent(true)}
/>;

برای صفحه‌های /settings که محتوای شخصی دارن، از 'use cache: private' استفاده شد تا داده فقط تو مرورگر خود کاربر بمونه. اسم تیم یا اکانت (scope) هم جزو کلید کش شد تا داده‌ها قاطی نشن، و مثلاً صفحهٔ Advanced تا پنج دقیقه از کش استفاده می‌کنه. تیم بعد از هر PR چهار شاخص رو تو production دنبال کرده: هزینهٔ Runtime Cache، حجم درخواست‌ها، Active CPU و انتقال داده.

نکات کلیدی:

• Partial Prefetching از Next.js 16.3 اومده و از 16.4 تو create-next-app پیش‌فرض روشنه
• Skill جدید next-partial-prefetching-optimizer تو Next.js 16.4 حلقهٔ تست و بازنویسی رو برای ایجنت خودکار می‌کنه
• helper instant() از @next/playwright چک می‌کنه چه UIیی قبل از کلیک آماده‌ست
• prefetch همهٔ کارت‌های grid درخواست‌ها رو ۲.۹ برابر کرد و با prefetch بر اساس hover/focus/touch درست شد
• 'use cache: remote' برای دادهٔ مشترک و 'use cache: private' برای دادهٔ شخصی تو مرورگر
• با next start خودمیزبان، 'use cache: remote' بدون تنظیم cacheHandlers.remote فقط از حافظه استفاده می‌کنه