استفاده از Next.js با App Router و Data-fetching

فهم نحوه‌ی استفاده از Next.js با App Router

اگه به دنیای توسعه وب علاقه داری و دلت می‌خواد با یک فریمورک مدرن کار کنی، Next.js گزینه‌ی مناسبیه. این فریمورک به شما این امکان رو می‌ده که با استفاده از React، وب‌سایت‌های عملکرد بالایی بسازی. یکی از ویژگی‌های جذاب Next.js، App Router هست که می‌تونه به شما کمک کنه تا برنامه‌هاتون رو منظم‌تر و قابل دسترس‌تر بسازید.

وقتی که حرف از Data-fetching به میان میاد، Next.js با قابلیت‌های فوق‌العاده‌ای مثل Server Actions و Mutations میاد. این قابلیت‌ها به شما این امکان رو می‌ده که اطلاعات رو به شکل معمولی و با استقامت بالایی از سرور بخونید و تغییر بدید. حالا اینجا نحوه‌ی استفاده از این قابلیت‌ها رو بررسی می‌کنیم.

Server Actions به شما اجازه می‌ده تا کدهای سمت سرور رو مستقیم داخل کامپوننت‌های React خودتون بنویسید. در واقع، شما می‌تونید تابعی رو بنویسید که اطلاعات رو از پایگاه داده دریافت کنه و با استفاده از آن اطلاعات، UI ویب‌سایتتون رو به‌روز کنید. این کار باعث می‌شه که فرایند بارگذاری صفحات سریع‌تر و بهینه‌تر بشه.

از طرف دیگه، Mutations به شما حالت به‌روزرسانی داده‌ها رو رو می‌ده. با استفاده از Mutations، شما می‌تونید داده‌های موجود رو تغییر بدید و بدون اینکه نیاز به بارگذاری مجدد صفحه باشه، تغییرات رو به مشتری نشان بدید. این نکته، تجربه‌ی کاربری رو خیلی بهبود می‌بخشه.

حالا بیایید به کدها نگاهی بندازیم تا بتونیم نحوه‌ی پیاده‌سازی Server Actions و Mutations رو بهتر درک کنیم.

// مثال از Server Action 
export async function getData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
}

// مثال از Mutation
export async function updateData(id, newData) {
    const response = await fetch(`/api/data/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(newData),
    });
    return await response.json();
}

توضیح کدهای مثال

کد: export async function getData() { ... }
این تابع یک عمل غیرهمزمان (async) رو تعریف می‌کنه که از API برای دریافت اطلاعات استفاده می‌کنه.

خط: const response = await fetch('/api/data');
با استفاده از متد fetch، داده‌ها رو از نقطه‌ی پایانی API می‌خوانیم.

کد: return data;
در انتها، داده‌های دریافتی رو به عنوان خروجی تابع برمی‌گردانیم.

کد: export async function updateData(id, newData) { ... }
این تابع برای به‌روزرسانی داده‌ها طرح‌ریزی شده و یک عمل غیرهمزمان رو پیاده‌سازی می‌کنه.

خط: method: 'PUT'
روش HTTP برای به‌روزرسانی داده‌ها با استفاده از درخواست PUT تنظیم شده.