Loading...
Loading...
در Next.js، مسیرها به‌صورت پیش‌فرض روی سرور رندر می‌شوند. این بدان معناست که کاربر باید منتظر پاسخ سرور بماند تا مسیر جدید نمایش داده شود. برای بهبود این تجربه، Next.js از تکنیک‌هایی مانند پیش‌بارگذاری (Prefetching)، Streaming، و انتقال سمت کلاینت استفاده می‌کند.
در Next.js، فایل‌های layout.tsx و page.tsx به‌صورت پیش‌فرض کامپوننت‌های سروری هستند. دو نوع رندر سمت سرور وجود دارد:
چالش این روش، تأخیر در نمایش مسیر جدید است. برای حل این مشکل، Next.js از پیش‌بارگذاری و انتقال سمت کلاینت استفاده می‌کند.
پیش‌بارگذاری یعنی بارگذاری مسیرها در پس‌زمینه قبل از کلیک کاربر. 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>
);
}میزان پیش‌بارگذاری به نوع مسیر بستگی دارد:
Streaming به سرور اجازه می‌دهد بخش‌هایی از مسیر را به‌محض آماده شدن ارسال کند، بدون اینکه منتظر رندر کامل بماند. این باعث می‌شود کاربر سریع‌تر بازخورد بصری دریافت کند.
برای فعال‌سازی Streaming، کافی است فایل loading.tsx را در پوشه مسیر قرار دهید:
// app/dashboard/loading.tsx
export default function Loading() {
return <LoadingSkeleton />;
}Next.js به‌صورت خودکار محتوای page.tsx را درون <Suspense> قرار می‌دهد و ابتدا UI موقتی را نمایش می‌دهد تا محتوای اصلی آماده شود.
Next.js با ترکیب رندر سمت سرور، پیش‌بارگذاری هوشمند، و Streaming، تجربه ناوبری را بهینه می‌کند. با استفاده از <Link> برای لینک‌دهی، loading.tsx برای skeleton UI، و ساختار مناسب مسیرها، می‌توان اپلیکیشنی سریع، پاسخ‌گو و کاربرپسند ساخت.