برای درک عمیق نحوه جابه‌جایی بین صفحات و ناوبری (Navigation) در فریم‌ورک Next.js، باید با چهار مفهوم کلیدی و هماهنگی آن‌ها با یکدیگر آشنا شوید: رندر سرور (Server Rendering)، پیش‌خوانی (Prefetching)، استریمینگ (Streaming) و انتقال سمت کلاینت (Client-side transitions).
ترکیب این چهار قابلیت باعث می‌شود اپلیکیشنی که در سمت سرور رندر می‌شود، سرعت و روانی یک اپلیکیشن کاملاً سمت کلاینت (SPA) را داشته باشد.
نحوه رندر و ارسال صفحات به کلاینت
مکانیزم بارگذاری پس‌زمینه صفحات با Prefetching
افزایش سرعت نمایش صفحات پویا به کمک Streaming
مزایای جابه‌جایی بدون رفرش به کمک تگ <Link>
در نسخه جدید Next.js (معماری App Router)، تمام پوشش‌ها (Layouts) و صفحات (Pages) به صورت پیش‌فرض کامپوننت‌های سروری ری‌اکت (React Server Components) هستند. این یعنی چه در اولین ورود کاربر به سایت و چه در مسیریابی‌های بعدی، کدهای جاوااسکریپت ابتدا روی سرور اجرا شده و یک خروجی به نام Server Component Payload تولید و به مرورگر فرستاده می‌شود.
به طور کلی رندر سرور به دو شکل (بر اساس زمان اجرا) اتفاق می‌افتد:
پیش‌رندر (Prerendering): در زمان بیلد گرفتن (Build Time) پروژه یا در فاز بازامپورت داده‌ها (Revalidation) رخ می‌دهد و خروجی آن برای سرعت بیشتر کَش (Cache) می‌شود (صفحات استاتیک).
رندر پویا (Dynamic Rendering): دقیقاً در لحظه درخواست کاربر (Request Time) روی سرور پردازش و ساخته می‌شود (صفحات پویا که دیتای زنده دارند).
💡 نکته: در اولین بازدید کاربر از سایت، علاوه بر Payload اختصاصی، فایل HTML صفحه نیز روی سرور ساخته و فرستاده می‌شود تا کاربر فوراً ظاهر اولیه سایت را ببیند.
بزرگ‌ترین چالش رندر سرور این است که کاربر باید منتظر بماند تا سرور پاسخ دهد و سپس صفحه جدید باز شود. Next.js برای حل این تاخیر از قابلیت Prefetching استفاده می‌کند. پیش‌خوانی یعنی دانلود اطلاعات یک صفحه در پس‌زمینه، قبل از اینکه کاربر روی آن کلیک کند!
وقتی شما از کامپوننت <Link> استفاده می‌کنید، به محض اینکه آن لینک وارد دیدرس (Viewport) کاربر شود، Next.js به صورت خودکار صفحه مقصد را در پس‌زمینه لود می‌کند:
// app/layout.tsx
import Link from 'next/link'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<nav>
{/* به محض دیده شدن یا هاور شدن، در پس‌زمینه دانلود می‌شود */}
<Link href="/blog">وبلاگ</Link>
{/* کاملاً سنتی؛ هیچ پیش‌خوانی انجام نمی‌شود و صفحه رفرش می‌شود */}
<a href="/contact">تماس با ما</a>
</nav>
{children}
</body>
</html>
)
}
مسیرهای استاتیک (Static Routes): کل اطلاعات و دیتای صفحه کاملاً دانلود و آماده می‌شود. کلیک روی آن آنی خواهد بود.
مسیرهای پویا (Dynamic Routes): برای جلوگیری از فشار روی سرور، پیش‌خوانی کل صفحه انجام نمی‌شود. اما اگر برای آن صفحه فایل loading.tsx ساخته باشید، ساختار کلی (Layout) و انیمیشن لودینگ پیش‌خوانی می‌شوند.
برای اینکه در صفحات پویا کاربر احساس نکند برنامه قفل شده یا پاسخی نمی‌دهد، از تکنیک استریمینگ (تزریق قطره‌چکانی) استفاده می‌شود. استریمینگ به سرور اجازه می‌دهد به محض آماده شدن هر بخش از صفحه، آن را فوراً به مرورگر بفرستد و منتظر آماده شدن کل صفحه نماند.
برای فعال‌سازی این قابلیت، کافی است یک فایل به نام loading.tsx در پوشه مسیر خود بسازید:
// app/dashboard/loading.tsx
export default function Loading() {
// ساختار اسکلتی یا انیمیشن لودینگ شما
return <LoadingSkeleton />
}
در پشت صحنه، Next.js محتوای فایل اصلی شما (page.tsx) را به طور خودکار درون یک مرز <Suspense> از ری‌اکت بسته‌بندی می‌کند. به محض کلیک کاربر، ظاهر لودینگِ پیش‌خوانی شده فورا نشان داده می‌شود و به محض رسیدن دیتای نهایی از سرور، جایگزین اسکلت لودینگ می‌شود.
ناوبری و جابه‌جایی بدون تاخیر و ارائه بازخورد بصری فوری به کاربر.
بخش‌های مشترک سایت (مثل سایدبار یا هدر) کاملاً فعال و قابل کلیک می‌مانند و کاربر حتی می‌تواند وسط لود شدن، پشیمان شده و به صفحه دیگری برود (Interruptible Navigation).
بهبود چشمگیر شاخص‌های حیاتی وب (Core Web Vitals) مانند TTFB و FCP.
در وب سنتی، رفتن به یک صفحه جدید باعث بارگذاری مجدد (Full Page Load) کل مرورگر می‌شد؛ اتفاقی که باعث پاک شدن وضعیت‌ها (State)، به هم ریختن اسکرول صفحه و فریز شدن موقت سایت می‌شد.
کامپوننت <Link> در Next.js از این رفتار جلوگیری کرده و یک انتقال تماماً کلاینتی ایجاد می‌کند. به جای لود مجدد مرورگر، این کامپوننت با متدهای هوشمند زیر صفحه را به‌روزرسانی می‌کند:
۱. ساختارهای مشترک (مثل هدر و فوتر والد) را کاملاً حفظ کرده و دوباره رندر نمی‌کند.
۲. فقط بخش متغیر صفحه را با لودینگِ پیش‌خوانی شده یا محتوای اصلی جایگزین می‌کند.
به لطف این ساختار، حتی در صفحات سنگین سروری، جابه‌جایی‌ها بدون رفرشِ صفحه و با سرعت فوق‌العاده بالا رخ می‌دهد. همچنین Next.js به طور خودکار اسکرول صفحه را در زمان جابه‌جایی به بالاترین نقطه هدایت می‌کند.
رندر سرور: صفحات به صورت پیش‌فرض کامپوننت سروری هستند و خروجی پپ‌لود آن‌ها روی سرور تولید می‌شود.
پیش‌خوانی (Prefetching): تگ <Link> کدهای صفحات مقصد را پیش از کلیک کاربر در پس‌زمینه دانلود می‌کند تا انتقال آنی شود.
استریمینگ (Streaming): با ساخت فایل loading.tsx قطعات آماده شده صفحه زودتر ارسال می‌شوند تا کاربر منتظر کل دیتای دیتابیس نماند.
انتقال کلاینتی: جابه‌جایی بین صفحات بدون رفرش شدن مرورگر انجام می‌شود که تجربه کاربری کاملاً روانی (شبیه به اپلیکیشن‌های موبایل) خلق می‌کند.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app