نکته: مدیریت وضعیت (State) در URL بدون درگیری سرور (Native History API)

مشکل:

می‌خواهیم وضعیت فعلی کاربر (مثل تب انتخاب شده، مودالِ باز، یا عبارت جستجو) را در آدرس مرورگر (URL) ذخیره کنیم تا لینک قابل بوک‌مارک کردن و اشتراک‌گذاری باشد. اما اگر برای تغییر URL از روتر پیش‌فرض استفاده کنیم، درخواستی به سرور ارسال شده و صفحه مجدداً پردازش/رندر می‌شود، در حالی که ما تمام داده‌ها را سمت کلاینت داریم و این کار باعث افت پرفورمنس و کندی بی‌دلیل می‌شود.

راه‌حل:

استفاده از متدهای بومی مرورگر یعنی window.history.pushState (برای افزودن به تاریخچه) و window.history.replaceState (برای جایگزینی در تاریخچه). این متدها پارامترهای URL را تغییر می‌دهند بدون اینکه صفحه رفرش شود یا درخواستی به سرور برود. در عین حال، فریم‌ورک‌هایی مثل Next.js این تغییر را تشخیص داده و UI را در لحظه آپدیت می‌کنند.

سناریوهای کاربردی:

1. مدیریت تب‌ها (Tabs):

کاربر در داشبورد خود بین تب‌های «پروفایل» و «تنظیمات» جابه‌جا می‌شود. آدرس مرورگر تغییر می‌کند تا اگر لینک را برای کسی فرستاد، دقیقاً همان تب باز شود، اما جابه‌جایی بین تب‌ها کاملاً سمت کلاینت و بدون بارگذاری مجدد انجام می‌شود.

2. کنترل مودال‌ها و پاپ‌آپ‌ها:

مودال ورود به سایت باز می‌شود و آدرس تغییر می‌کند. بزرگترین مزیت این کار این است که اگر کاربر در گوشی خود دکمه «بازگشت» (Back) را بزند، به جای اینکه کلاً از صفحه قبل خارج شود، فقط مودال بسته می‌شود.

3. جستجو و فیلتر زنده (Live Search/Filter):

لیست محصولات از قبل دریافت شده است. کاربر در نوار جستجو تایپ می‌کند و لیست در لحظه فیلتر می‌شود. همزمان آدرس مرورگر آپدیت می‌شود تا وضعیت جستجو در URL ذخیره بماند، بدون اینکه برای هر حرف تایپ شده، سرور درگیر شود.

4. تغییر حالت نمایش (View Mode):

کاربر نحوه نمایش لیست مقالات را از حالت «جدول» به حالت «کارت» تغییر می‌دهد. این وضعیت در آدرس ذخیره می‌شود تا ترجیح کاربر حفظ شود.

5. صفحه‌بندی سمت کلاینت (Client-side Pagination):

صد کاربر از سرور دریافت شده‌اند. برای رفتن به صفحه دوم (نمایش ۱۰ کاربر بعدی)، آدرس مرورگر تغییر می‌کند اما چون داده‌ها از قبل موجودند، نیازی به درخواست جدید از سرور نیست.