مفهوم Navigation در Next.js

در Next.js به صورت پیش‌فرض رندر شدن صفحات در سمت سرور انجام می‌شود. برای اینکه کاربر منتظر پاسخ سرور نماند و حس کند برنامه بسیار سریع است، Next.js از سه تکنیک اصلی استفاده می‌کند: Prefetching (پیش‌بارگذاری)، Streaming (ارسال تکه‌تکه) و Client-side transitions (انتقال سمت کلاینت).

۱. مسیریابی چگونه کار می‌کند؟ (How navigation works)

برای درک مسیریابی باید ۴ مفهوم را بدانید:

الف) رندر سمت سرور (Server Rendering)

کامپوننت‌ها (مثل Layoutها و Pageها) به طور پیش‌فرض در سرور رندر می‌شوند. این کار به دو زمان تقسیم می‌شود:

• Prerendering (پیش‌رندر): در زمان Build یا Revalidation انجام و کَش می‌شود.

• Dynamic Rendering (رندر پویا): دقیقاً در لحظه درخواست کاربر انجام می‌شود.

ب) پیش‌بارگذاری (Prefetching)

داده‌های یک مسیر، قبل از اینکه کاربر روی آن کلیک کند در پس‌زمینه دانلود می‌شود.

• چطور کار می‌کند؟ به محض اینکه تگ <Link> در صفحه مانیتور (Viewport) کاربر دیده شود، Next.js آن را پیش‌بارگذاری می‌کند.

• تفاوت مسیر استاتیک و پویا: مسیرهای استاتیک کامل دانلود می‌شوند، اما مسیرهای پویا (Dynamic) یا نادیده گرفته می‌شوند یا فقط تا فایل loading.tsx دانلود می‌شوند تا به سرور فشار نیاید.

ج) استریمینگ (Streaming)

به جای اینکه سرور صبر کند تا کل صفحه پردازش شود، آن را بخش به بخش برای کاربر می‌فرستد.

• نحوه استفاده: کافیست یک فایل loading.tsx بسازید. Next.js خودش صفحه را درون یک کامپوننت <Suspense> قرار می‌دهد.

د) انتقال سمت کلاینت (Client-side transitions)

وقتی با <Link> به صفحه جدیدی می‌روید، کل صفحه در مرورگر رفرش (Reload) نمی‌شود.

• بخش‌های مشترک (مثل منوی بالای سایت یا Layout) دست‌نخورده باقی می‌مانند.

• فقط محتوای صفحه جدید جایگزین می‌شود و اسکرول به بالای صفحه برمی‌گردد.

۲. چه عواملی باعث کندی مسیریابی می‌شوند و راه حل چیست؟ (What can make transitions slow)

گاهی با وجود این بهینه‌سازی‌ها، سایت کند به نظر می‌رسد. دلایل آن شامل موارد زیر است:

الف) مسیرهای پویا بدون loading.tsx

اگر صفحه شما دیتای پویا (مثل سبد خرید) دارد و فایل loading ندارید، کاربر روی لینک کلیک می‌کند و تا زمانی که سرور جواب ندهد، هیچ اتفاقی در صفحه نمی‌افتد (صفحه فریز می‌شود).

• راه حل: حتماً فایل loading.tsx بسازید تا بلافاصله به کاربر یک اسکلت لودینگ نشان داده شود.

ب) مسیرهای پویا بدون generateStaticParams

اگر صفحات پویایی دارید (مثل مقالات وبلاگ [slug]) که می‌شد از قبل رندر شوند اما این کار را نکرده‌اید، سرور مجبور است در لحظه درخواست آن‌ها را بسازد.

• راه حل: با تابع generateStaticParams در زمان Build، لیست مقالات را بگیرید تا همه از قبل آماده (Prerender) شوند.

ج) اینترنت کند (Slow networks)

روی اینترنت‌های ضعیف، عملیات Prefetching به موقع تمام نمی‌شود. وقتی کاربر کلیک می‌کند، حتی فایل loading هم هنوز دانلود نشده تا نمایش داده شود.

• راه حل: استفاده از هوک useLinkStatus. با این هوک می‌توانید به محض اینکه کاربر کلیک کرد، روی خود دکمه یک حالت “در حال انجام…” (Pending) نشان دهید.

• سناریوی واقعی: کاربر در مترو اینترنت ضعیفی دارد. روی “پرداخت” کلیک می‌کند، چون اتفاقی نمی‌افتد ۳ بار دیگر کلیک می‌کند. با این هوک، با اولین کلیک، رنگ دکمه خاکستری می‌شود تا کاربر بفهمد سیستم در حال تلاش است.

د) غیرفعال کردن پیش‌بارگذاری (Disabling prefetching)

شما می‌توانید با دادن prefetch={false} به تگ <Link>، این قابلیت را خاموش کنید.

• سناریوی واقعی: شما یک لیست بی‌نهایت (Infinite scroll) مثل تایم‌لاین توییتر دارید که شامل ۱۰۰۰ لینک است. اگر Next.js بخواهد همه را پیش‌بارگذاری کند، اینترنت و سیستم کاربر نابود می‌شود!

• راه حل جایگزین (تریک): به جای خاموش کردن کامل، کامپوننتی بنویسید که فقط وقتی موس کاربر روی لینک رفت (Hover شد)، پیش‌بارگذاری را انجام دهد (با onMouseEnter).

هـ) تکمیل نشدن هیدراتاسیون (Hydration not completed)

تگ <Link> برای کار کردن به جاوا اسکریپت نیاز دارد. اگر حجم کدهای جاوا اسکریپت سمت کاربر (Client) خیلی زیاد باشد، مرورگر دیرتر آن‌ها را اجرا می‌کند و تا آن زمان Prefetching کار نمی‌کند.

• راه حل: کاهش حجم باندل (Bundle size) و انتقال منطق‌های پردازشی به سرور.

۳. مثال‌ها: استفاده از API بومی تاریخچه مرورگر (Native History API)

Next.js به شما اجازه می‌دهد URL صفحه را بدون رفرش شدن عوض کنید و پارامترها (مثل ?sort=asc) را آپدیت کنید. این کار با توابع بومی جاوا اسکریپت انجام می‌شود:

الف) window.history.pushState

برای اضافه کردن یک مرحله به تاریخچه (History) مرورگر.

• سناریوی واقعی: کاربر در یک فروشگاه، محصولات را روی “ارزان‌ترین” مرتب می‌کند. URL به ?sort=asc تغییر می‌کند. اگر دکمه Back (بازگشت) مرورگر را بزند، به حالت بدون فیلتر قبلی برمی‌گردد.

ب) window.history.replaceState

برای جایگزین کردن URL فعلی بدون اضافه شدن به تاریخچه مرورگر (کاربر نمی‌تواند دکمه Back را بزند).

• سناریوی واقعی: تغییر زبان سایت از انگلیسی به فرانسوی (/en/ به /fr/). در این حالت نمی‌خواهیم کاربر با زدن دکمه Back مرورگر دوباره به زبان انگلیسی برگردد، چون زبان اصلی خودش را انتخاب کرده است. پس وضعیت فعلی را “جایگزین” می‌کنیم.