۱. تابع connection چیست؟
connection() تابعی در Next.js است که باعث میشود رندر کامپوننت تا زمان دریافت درخواست واقعی کاربر به تعویق بیفتد. این تابع برای مواقعی مناسب است که از APIهای داینامیک استفاده نمیکنید، اما میخواهید خروجی در زمان اجرا تولید شود.
مثال:
// app/page.tsx
import { connection } from 'next/server'
export default async function Page() {
await connection()
const rand = Math.random()
return <span>{rand}</span>
}در این مثال، مقدار Math.random() در زمان اجرا تولید میشود و از prerendering حذف میشود.
۲. API کوکیها در Next.js
تابع cookies() امکان خواندن کوکیهای ورودی در Server Components و خواندن/نوشتن کوکیهای خروجی در Server Actions و Route Handlers را فراهم میکند.
خواندن یک کوکی:
const cookieStore = await cookies()
const theme = cookieStore.get('theme')خواندن همه کوکیها:
cookieStore.getAll().map((cookie) => (
<div key={cookie.name}>
<p>Name: {cookie.name}</p>
<p>Value: {cookie.value}</p>
</div>
))بررسی وجود کوکی:
const hasCookie = cookieStore.has('theme')تنظیم کوکی (فقط در Server Action یا Route Handler):
cookieStore.set('name', 'lee', { secure: true })حذف کوکی:
cookieStore.delete('name')cookieStore.set('name', '')cookieStore.set('name', 'value', { maxAge: 0 })
۳. نکات مهم درباره کوکیها
- تابع
cookies()در نسخه ۱۵ به صورت async طراحی شده است - استفاده از cookies باعث داینامیک شدن مسیر میشود
- تنظیم یا حذف کوکی فقط در Server Action یا Route Handler ممکن است
- کوکیها در سمت کلاینت ذخیره میشوند؛ سرور فقط دستور ذخیره را ارسال میکند
۴. رفتار کوکیها در Server Actions
پس از تنظیم یا حذف کوکی در Server Action، Next.js صفحه و layoutهای مرتبط را مجدد رندر میکند تا UI با مقدار جدید هماهنگ شود. برای تازهسازی کش نیز میتوان از revalidatePath یا revalidateTag استفاده کرد.
جمعبندی
تابع connection() به شما امکان میدهد رندر را به زمان درخواست واقعی موکول کنید، و API کوکیها در Next.js ابزار قدرتمندی برای مدیریت وضعیت کاربر در سمت سرور فراهم میکند. با استفاده درست از این دو قابلیت، میتوانید تجربهای پویا و امن برای کاربران بسازید.