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

تیم Next.js تو بلاگ رسمی‌ش تعریف کرده که چطور ناوبری بین صفحه‌های v0 — پلتفرم کدنویسی فول‌استک ورسل — رو آنی کرده. به گفته‌ی این مقاله تا قبل از این فقط دو راه برای آنی‌کردن ناوبری وجود داشت: یا prerender استاتیک موقع build که برای اپ‌های داینامیک و پر از داده‌ی شخصی عملاً جواب نمی‌ده، یا prefetch کامل لینک‌ها که گرون تموم می‌شه و به سرور فشار میاره. اپ‌هایی مثل v0 عملاً بین این دو گیر کرده بودن.

Next.js 16.3 راه سوم رو باز کرده: محتوای داینامیک همون موقعی که کاربر داره تو اپ می‌چرخه از قبل رندر می‌شه و کامل تو مرورگر کش می‌مونه. کامپوننتی که UI شخصی‌سازی‌شده می‌سازه یا باید یه loading state با Suspense تعریف کنه یا اون تیکه از UI رو با 'use cache' قابل پیش‌رندر علامت بزنه. اون‌وقت Next.js می‌تونه همین بخش رو قبل از ناوبری تو کلاینت لود کنه، بدون اینکه کل صفحه‌ی مقصد رندر بشه یا مجبور باشی داده‌گیری رو به کلاینت منتقل کنی.

جذاب‌ترین تیکه‌ی ماجرا ابزار سنجشه: هلپر instant() برای Playwright — یعنی یه کمکی که وسط تست ناوبری رو نگه می‌داره — چک می‌کنه کدوم بخش‌های UI بدون هیچ درخواست شبکه‌ای جلوی چشم کاربر میان. اگه محتوای موردانتظار پشت شبکه گیر کرده باشه، تست فیل می‌شه. یعنی «آنی بودن»، که همیشه یه حس مبهم بود، تبدیل شده به یه تست قطعی:

import { instant } from '@next/playwright';

await instant(page, async () => {
  await page.getByRole('link', { name: 'Chats' }).click();
  await expect(page.getByTestId('app-title')).toBeVisible();
});

با همین تست، ورسل یه ایجنت رو تو حلقه گذاشت: برای هر ناوبری کند یه تست فیل‌شونده بنویس، با الگوهای یه Skill آماده اصلاحش کن، دوباره تست رو اجرا کن و تا سبزشدن ادامه بده. نویسنده می‌گه بیشتر اصلاح‌ها ساده بودن — کافی بود داده‌ی داینامیک بره زیر یه مرز Suspense تا بقیه‌ی صفحه بتونه توی shell جا بگیره:

export default function WorkspacePage() {
  return (
    <SettingsPageLayout>
      <SettingsHeader title="Workspace" />
      <Suspense fallback={<WorkspaceSkeleton />}>
        <WorkspaceContent />
      </Suspense>
    </SettingsPageLayout>
  );
}

آخرش صفحه‌ی خونه (هم لاگین‌شده هم مهمون)، صفحه‌ی جزئیات چت و همه‌ی زیرصفحه‌های تنظیمات از حالت بلاک‌شده به آنی رسیدن و ۱۶ تست جدید هم تو CI موند تا جلوی برگشت کندی رو بگیره. نویسنده از این ماجرا یه نتیجه‌ی کلی‌تر می‌گیره: تو دوره‌ای که ایجنت‌ها بخش زیادی از کد رو می‌نویسن، مفیدترین چیزی که یه فریم‌ورک می‌تونه بده همین verifierهاست — ابزارهایی که کیفیت مبهم UX رو قابل‌سنجش می‌کنن و ایجنت رو محدود می‌کنن به خروجی بهتر.

نکات کلیدی:

• Next.js 16.3 محتوای داینامیک رو حین گشتن کاربر پیش‌رندر می‌کنه و تو مرورگر کش می‌کنه
• هلپر instant() تو @next/playwright تست می‌کنه چه بخشی از UI بدون درخواست شبکه دیده می‌شه
• الگوی رایج اصلاح: بردن داده‌ی داینامیک زیر مرز Suspense به‌جای await تو خود صفحه
• خروجی کار روی v0: صفحه‌ی خونه، جزئیات چت و کل بخش settings آنی شدن، با ۱۶ تست ضدرگرسیون
• Skill مورد استفاده با npx skills add vercel/next.js --skill next-cache-components-optimizer نصب می‌شه