‏Next.js 16.3: ناوبری آنی، حس SPA بدون ترک سرور

تیم Next.js پیش‌نمایش عمومی نسخهٔ ۱۶.۳ رو روی npm با تگ @preview منتشر کرده و می‌گه نسخهٔ پایدارِ صیقل‌خورده تو هفته‌های آینده میاد. این نسخه چیزهای زیادی داره — رندر بهتر زیر فشار به لطف استریم‌های نیتیو Node.js، بالا اومدن سریع‌تر تو محیط توسعه و ادغام عمیق‌تر با ورک‌فلوهای ایجنتی — ولی تمرکز این اعلان روی یه فیچره: Instant Navigations.

مسئله‌ای که حل می‌کنه یه انتقاد قدیمی و به گفتهٔ خود تیم، بجاست: تو یه اپ سرورمحور، هر ناوبری یه رفت‌وبرگشت شبکه لازم داره — کلیک می‌کنی، هیچی نمی‌شه، بعد سرور جواب می‌ده و صفحهٔ بعدی میاد. تو اپ‌های کلاینت‌محور اما، بلافاصله بعد از کلیک، پوسته (shell) صفحهٔ بعدی رو می‌بینی و بعد دادهٔ کامل جاش می‌شینه. همین «حس بهتر» یکی از دلایل اصلی گرایش توسعه‌دهنده‌ها به SPAهاست.

راه‌حل، رفتارهای جدیدِ opt-in ـه که پشت فلگ cacheComponents قرار گرفته:

import type { NextConfig } from 'next';

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

export default nextConfig;

حالا هر وقت یه route روی سرور منتظر داده‌ای بمونه، باید بین سه گزینه انتخاب کنی: Stream با Suspense (کاربر فوراً یه حالت لودینگ می‌بینه و بقیهٔ UI استریم می‌شه)، Cache با 'use cache' (کاربر فوراً یه UI کش‌شده از قبل می‌بینه)، یا Block با export const instant = false برای مسیرهایی که عمداً می‌خوای منتظر سرور بمونن — مثلاً یه بلاگ که نمی‌خواد برای پست‌ها پوستهٔ لودینگ نشون بده. دو حالت اول ناوبری رو شبیه SPA فوری می‌کنن.

تیم برای اینکه مسیرهای فوری بعد از ریفکتور دوباره کند نشن، ناوبری کند رو تو محیط توسعه به ارور تبدیل کرده (Instant Insights) و یه هلپر تست instant() برای Playwright هم داده که ادعا کنی بعد از کلیک، بدون انتظار شبکه چی باید دیده بشه:

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

await instant(page, async () => {
  await page.click('a[href="/products/hats"]');
  await expect(page.locator('h1')).toContainText('Baseball Cap');
  await expect(page.getByText('Checking inventory...')).toBeVisible();
});

بخش دوم ماجرا بازاندیشی در prefetch ـه. قبلاً Next.js برای هر لینکِ داخل viewport یه ریکوئست prefetch می‌فرستاد؛ تیم صریحاً می‌گه خیلی‌ها گفتن این رگبار ریکوئست مسخره به نظر می‌رسه و حق هم دارن. حالا ترفند SPAها رو قرض گرفتن: به‌جای prefetch به‌ازای هر لینک، یه shell قابل‌استفادهٔ مجدد به‌ازای هر route گرفته و روی کلاینت کش می‌شه. اگه سایدبارت بیست تا لینک چت داره، به‌جای بیست ریکوئست، فقط یه بار برای مسیر /chat/[id] پوسته گرفته می‌شه. همین پوسته‌های مشترک، پایهٔ ناوبری آفلاین تو نسخه‌های بعدی هم هستن.

این رفتار جدید که اسمش Partial Prefetching ـه با فلگ partialPrefetching روشن می‌شه و مثل cacheComponents قراره تو یه نسخهٔ major بعدی پیش‌فرض بشه. برای دیدنش هم یه Navigation Inspector به DevTools اضافه شده که هر ناوبری رو سرِ پوسته نگه می‌داره تا ببینی چی prefetch شده و کدوم بخش فقط بعد از رفت‌وبرگشت شبکه میاد. اگه بخوای بیشتر از پوسته prefetch بشه، می‌شه پرِ لینک opt-in کرد؛ محتوای اضافه محدود به چیزیه که موقع build شناخته شده، مگه اینکه با export const prefetch = 'allow-runtime' بار بیشتری روی سرور رو قبول کنی.

تیم می‌گه خودشون قبل از این ریلیز، ابزارها رو روی v0 به کار گرفتن و Instant Insights دقیقاً مسیرهایی رو نشون داده که فوری نبودن. یه دموی متن‌باز هم به اسم Next Beats (یه پخش‌کنندهٔ موسیقی روی همین پیش‌نمایش) منتشر شده. نصبش با npm install next@preview ـه، ولی چون نسخهٔ پیش از تولیده، برای دیپلوی روی کاربر واقعی باید محتاط بود. دو مشکل شناخته‌شده هم هست: بعضی مسیرهای بلاک‌شونده به‌عنوان Instant Insight گزارش نمی‌شن، و ابزار Instant Insights تو Safari مشکل داره (فعلاً Chrome یا Firefox).

نکات کلیدی:

• Instant Navigations می‌خواد حس فوریِ SPA رو بدون کنارگذاشتن مدل سرورمحور به Next.js بیاره
• هر مسیر باید یکی از سه راه رو انتخاب کنه: Stream با Suspense، Cache با 'use cache'، یا Block با export const instant = false
• prefetch از «هر لینک» به «یک پوستهٔ قابل‌استفادهٔ مجدد برای هر route» تغییر کرده (Partial Prefetching)
• ناوبری کند تو محیط توسعه ارور می‌شه؛ هلپر instant() برای Playwright و Navigation Inspector برای بررسی پوسته‌ها اضافه شدن
• همه‌چیز پشت فلگ‌های cacheComponents و partialPrefetching ـه و فعلاً پیش‌نمایشه: npm install next@preview