برای مصاحبه فنی، بهترین روش این است که اول مسئله را توضیح دهی، بعد راه‌حل را، و در آخر مثال عملی بزنی. در ادامه یک متن آماده و روان برای بیان شفاهی آماده کرده‌ام:
«در Next.js، ما برای افزایش سرعت، داده‌ها را کش (Cache) می‌کنیم. اما مشکل اینجاست که وقتی داده‌ها در بک‌اند تغییر می‌کنند، کش ما قدیمی می‌شود. به این مشکل Stale Data می‌گوییم. برای حل این مشکل، از استراتژی‌های Cache Invalidation استفاده می‌کنیم که یعنی «چه زمانی کش را باطل و داده‌های تازه را جایگزین کنیم».»
«در Next.js دو رویکرد اصلی داریم: بر اساس مسیر (Path-based) و بر اساس تگ (Tag-based).»
«در این روش، به Next.js می‌گوییم که هر چند ثانیه یک‌بار، یک صفحه‌ی خاص را دوباره بساز. این کار با دو مقدار انجام می‌شود:»
time-based در fetch یا revalidate در صفحه:
«مثلاً اگر بنویسم
revalidate: 60، یعنی هر ۶۰ ثانیه یک‌بار، این صفحه در پس‌زمینه ری‌جنریت می‌شود و دفعه‌ی بعد که کاربر بیاید، نسخه‌ی تازه را می‌بیند.»
revalidatePath در سرور اکشن‌ها:
«وقتی کاربر کاری انجام می‌دهد (مثل ثبت نظر)، من با
revalidatePath('/posts')به Next.js می‌گویم که مسیر مربوطه را پاک کن و در دفعه‌ی بعد که درخواست شد، از نو بساز.»
«مزیتش سادگی است، اما عیبش این است که اگر مسیرهای زیادی داشته باشیم، باید تک‌تک آن‌ها را مدیریت کنیم.»
«روش دقیق‌تر، استفاده از تگ است. من هنگام دریافت داده، یک برچسب (تگ) به آن attach می‌کنم. مثلاً:»
javascript
fetch('https://api.example.com/posts', { next: { tags: ['posts'] } })
«حالا هر جا که داده‌ی مربوط به پست‌ها تغییر کند، مثلاً یک پست جدید اضافه شود، من با دستور
revalidateTag('posts')به Next.js می‌گویم: هر درخواستی که این تگ را دارد، کشش را باطل کن.»
«مزیت بزرگ این روش این است که من نیازی نمی‌دانم داده در کدام مسیر استفاده شده است. Next.js خودش تمام مسیرهایی که از این تگ استفاده کرده‌اند را پیدا کرده و آن‌ها را ری‌جنریت می‌کند.»
«این روش برای اپلیکیشن‌های بزرگ خیلی مناسب‌تر است، چون کش را به‌صورت دانه‌دانه (Granular) و بر اساس موضوع داده مدیریت می‌کنیم، نه بر اساس صفحه.»
«نکته‌ی مهم این است که در Next.js 14 به‌بعد، هر دو روش در سرور کامپوننت‌ها و سرور اکشن‌ها قابل استفاده هستند. انتخاب بین این دو به این بستگی دارد که: اگر داده‌ی ما در چندین صفحه پراکنده است، Tag-based بهتر است و اگر فقط یک صفحه‌ی خاص را داریم، Path-based کافی است. همچنین می‌توانیم هر دو را با هم ترکیب کنیم.»
تفاوت revalidatePath و revalidateTag چیست؟
revalidatePathیک مسیر خاص را پاک می‌کند، ولیrevalidateTagتمام مسیرهایی که از آن تگ استفاده کرده‌اند را پیدا کرده و پاک می‌کند.
آیا می‌توانیم درخواست‌های client-side را هم مدیریت کنیم؟
در سمت کلاینت، از کتابخانه‌هایی مثل React Query یا SWR استفاده می‌کنیم که با
useQueryوinvalidateQueriesکار مشابهی را انجام می‌دهند، اما در Next.js بحث ما روی کش سرور است.
