دسته ‌بندی آموزش ها
برچسب ها

راهنمای استفاده از App Router در Next.js: دریافت و مدیریت داده

nextjs app router data fetching guide
20 آبان 1403

ابتدا چرا لازم است App Router را بشناسیم؟

اگر با فریم‌ورک Next.js کار کرده باشید، حتما می‌دانید که یکی از ویژگی‌های بارز این فریم‌ورک، توانایی مدیریت مسیریابی به صورت هوشمندانه و بهینه است. App Router در Next.js ابزاری کارآمد برای مدیریت و سازماندهی مسیرهای پیچیده اپلیکیشن شما است.

ادغام مستقیم با سرور

یکی از جذابیت‌های اصلی App Router این است که کاملاً با سرور شما ادغام می‌شود. برخلاف رویکردهای سنتی که ماژول‌های جداگانه‌ای برای مدیریت کارهایی مثل دریافت داده نیاز بود، این ابزار همه چیز را یکجا و بهینه مدیریت می‌کند.

مدیریت داده‌ها و بافر آن‌ها

در Next.js می‌توان به سادگی داده‌ها را با استفاده از فرایند سرور-محور دریافت کرد. ابزارهای ویژه‌ای مانند getStaticProps و getServerSideProps در این مسیر به کمک شما می‌آیند.

متدهای کش کردن و اعتبارسنجی مجدد داده‌ها

کش کردن داده‌ها و اعتبارسنجی مجدد آن‌ها به معنای بهینه‌سازی و افزایش سرعت عملکرد اپلیکیشن است. شما می‌توانید کنترل کاملی بر روی فرایند کش کردن داشته باشید و رفتار اپلیکیشن خود را مطابق با نیاز‌های خاص هر پروژه سفارشی‌سازی کنید.


  import useSWR from 'swr';

  function App() {
    const fetcher = url => fetch(url).then(res => res.json());
    const { data, error } = useSWR('/api/data-endpoint', fetcher);
    
    if (error) return <div>خطا در دریافت داده</div>;
    if (!data) return <div>در حال بارگذاری...</div>;
    
    return (
      <div>
        <h2>داده‌ها:</h2>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }

شرح کد

import useSWR from 'swr';
ما از کتابخانه SWR برای مدیریت درخواست‌های HTTP و دریافت داده‌ها استفاده می‌کنیم.
function App() {
این تابع اصلی ما است که در واقع، کامپوننتی برای نمایش داده‌های دریافتی ما است.
const fetcher = url => fetch(url).then(res => res.json());
در اینجا ما فانکشنی برای دریافت و تبدیل داده‌ها به فرمت JSON تعریف کرده‌ایم.
const { data, error } = useSWR('/api/data-endpoint', fetcher);
ما با استفاده از SWR برای دریافت داده‌ها مکانیزمی تعریف کرده‌ایم که به صورت خودکار داده‌ها را می‌گیرد و در صورت وجود خطا آن را مدیریت می‌کند.
if (error) return <div>خطا در دریافت داده</div>;
پیغام خطا در صورت نقص در دریافت داده نمایش داده می‌شود.
if (!data) return <div>در حال بارگذاری...</div>;
پیغام بارگذاری در صورت عدم دسترسی به داده‌ها نمایش داده می‌شود.
return ( ... )
خروجی کامپوننت HTML برای نمایش داده‌های دریافتی.
<pre>{JSON.stringify(data, null, 2)}</pre>
داده‌ها به صورت JSON و به شکل قالب‌بندی شده نمایش داده می‌شوند.

سوالات متداول

؟

چرا باید از App Router در Next.js استفاده کنم؟

؟

چگونه می‌توانم داده‌ها را با Next.js کش کنم؟

؟

آیا App Router می‌تواند با سرور ارتباط داشته باشد؟

مطالب مرتبط