مقدمه
در Next.js، مسیرها به‌صورت پیش‌فرض روی سرور رندر می‌شوند. این بدان معناست که کاربر باید منتظر پاسخ سرور بماند تا مسیر جدید نمایش داده شود. برای بهبود این تجربه، Next.js از تکنیک‌هایی مانند پیش‌بارگذاری (Prefetching)، Streaming، و انتقال سمت کلاینت استفاده می‌کند.
رندر سمت سرور
در Next.js، فایل‌های layout.tsx و page.tsx به‌صورت پیش‌فرض کامپوننت‌های سروری هستند. دو نوع رندر سمت سرور وجود دارد:
- رندر ایستا (Static Rendering): در زمان build یا revalidation انجام می‌شود و نتیجه کش می‌شود.
- رندر پویا (Dynamic Rendering): در زمان درخواست کاربر انجام می‌شود.
چالش این روش، تأخیر در نمایش مسیر جدید است. برای حل این مشکل، Next.js از پیش‌بارگذاری و انتقال سمت کلاینت استفاده می‌کند.
پیش‌بارگذاری (Prefetching)
پیش‌بارگذاری یعنی بارگذاری مسیرها در پس‌زمینه قبل از کلیک کاربر. Next.js به‌صورت خودکار مسیرهایی را که با <Link> مشخص شده‌اند، هنگام ورود به viewport یا hover شدن، پیش‌بارگذاری می‌کند:
// app/layout.tsx
import Link from 'next/link';
export default function Layout({ children }) {
return (
<html>
<body>
<nav>
<Link href="/blog">Blog</Link> {/* پیش‌بارگذاری می‌شود */}
<a href="/contact">Contact</a> {/* پیش‌بارگذاری نمی‌شود */}
</nav>
{children}
</body>
</html>
);
}میزان پیش‌بارگذاری به نوع مسیر بستگی دارد:
- مسیر ایستا: به‌طور کامل پیش‌بارگذاری می‌شود.
- مسیر پویا: پیش‌بارگذاری نمی‌شود یا فقط بخشی از آن (مانند لایه‌ها یا loading) بارگذاری می‌شود.
Streaming
Streaming به سرور اجازه می‌دهد بخش‌هایی از مسیر را به‌محض آماده شدن ارسال کند، بدون اینکه منتظر رندر کامل بماند. این باعث می‌شود کاربر سریع‌تر بازخورد بصری دریافت کند.
برای فعال‌سازی Streaming، کافی است فایل loading.tsx را در پوشه مسیر قرار دهید:
// app/dashboard/loading.tsx
export default function Loading() {
return <LoadingSkeleton />;
}Next.js به‌صورت خودکار محتوای page.tsx را درون <Suspense> قرار می‌دهد و ابتدا UI موقتی را نمایش می‌دهد تا محتوای اصلی آماده شود.
مزایای استفاده از loading.tsx
- ناوبری سریع و بازخورد فوری برای کاربر
- لایه‌های مشترک فعال باقی می‌مانند
- بهبود Core Web Vitals مانند TTFB، FCP و TTI
جمع‌بندی
Next.js با ترکیب رندر سمت سرور، پیش‌بارگذاری هوشمند، و Streaming، تجربه ناوبری را بهینه می‌کند. با استفاده از <Link> برای لینک‌دهی، loading.tsx برای skeleton UI، و ساختار مناسب مسیرها، می‌توان اپلیکیشنی سریع، پاسخ‌گو و کاربرپسند ساخت.