نکته مهم: مدیریت مقادیر غیرقطعی (مثل زمان یا عدد تصادفی) در رندرینگ سرور Next.js

داستان چیه؟ (The Problem)

Next.js برای افزایش سرعت، به صورت پیش‌فرض کامپوننت‌ها را در زمان بیلد یا در اولین درخواست، رندر و نتیجه‌ی آن را کش می‌کند (Static Rendering). اگر در کامپوننتی از توابع غیرقطعی مثل Date.now() یا Math.random() استفاده کنید، مقدار آن‌ها فقط یک بار در زمان رندر اولیه محاسبه شده و در خروجی HTML “فریز” یا “منجمد” می‌شود. در نتیجه، تمام کاربران بعدی همان مقدار قدیمی و کش‌شده را می‌بینند، نه یک مقدار جدید.

چرا به راهکار نیاز داریم؟ (The Use Cases)

دو سناریوی کاملاً متفاوت وجود دارد که باید مدیریت شوند:

1. نیاز به مقدار جدید در هر درخواست: می‌خواهیم بخشی از صفحه همیشه به‌روز باشد. مثلاً:

• نمایش زمان دقیق ورود کاربر به صفحه.

• تولید یک شناسه‌ی یکتای درخواست (Request ID) برای لاگ‌ها.

• نمایش یک بنر تبلیغاتی تصادفی در هر بار بازدید از صفحه.

2. نیاز به مقدار ثابت در طول عمر کش: می‌خواهیم یک مقدار تصادفی تولید شود، اما برای مدتی (مثلاً ۲۴ ساعت) برای همه کاربران ثابت بماند. مثلاً:

• نمایش “محصول پیشنهادی روز” که به صورت تصادفی انتخاب می‌شود اما تا فردا تغییر نمی‌کند.

• اجرای تست A/B که کاربر را به صورت تصادفی در یک گروه قرار می‌دهد و این گروه تا پایان تست ثابت می‌ماند.

راهکار چیه؟ (The Solution)

Next.js برای هر کدام از این سناریوها یک راهکار مشخص ارائه می‌دهد:

• راهکار ۱ (برای مقدار جدید در هر درخواست):

• باید رندر آن بخش از صفحه را به زمان درخواست (Request Time) منتقل کنیم.

• روش: قبل از فراخوانی تابع غیرقطعی، از await connection() استفاده کنید و کامپوننت را درون یک <Suspense> قرار دهید.

• نتیجه: این کار به Next.js می‌گوید که این کامپوننت داینامیک است و باید منتظر بماند. با استفاده از PPR، پوسته ثابت صفحه فوراً ارسال می‌شود و محتوای این بخش داینامیک پس از آماده شدن، به کلاینت استریم می‌شود.

• راهکار ۲ (برای مقدار ثابت در طول عمر کش):

• باید نتیجه‌ی اولین اجرای تابع غیرقطعی را در کش سرور ذخیره کنیم.

• روش: با استفاده از use cache

• نتیجه: در اولین درخواست، تابع اجرا شده و مقدار تصادفی تولید و کش می‌شود. در درخواست‌های بعدی تا زمان انقضای کش، همان مقدار کش‌شده برگردانده می‌شود.