جلب البيانات في next js

عبد النور محمد · 23 يونيو 2021

مرحبا وجدت مثال في توثيق موقع next js عن جلب البيانات وقد قمت بدراسته ولكن لم أفهم شئ

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

//المفروض هذه تجلب البيانات وترسلها للمكون فوق
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
   
    revalidate: 10, // In seconds
  }
}

//لكن لماذا كررنا العملية هنا ؟
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

 
  return { paths, fallback: 'blocking' }
}

export default Blog

وما الفرق بين getStaticPaths و getStaticProps ؟

عبدالباسط ابراهيم · 23 يونيو 2021

ليس هناك وجه مقارنة بين getStaticPaths و getStaticProps حيث

getStaticProps تقوم بجلب البيانات
getStaticPaths تقوم بإنشاء paths بناء على هذه البيانات من ال getStaticProps

في السطر التالي نقوم يإنشاء ال paths من خلال البيانات حيث من خلال ال post.id التي تصلنا يمكننا إنشاء ال paths

const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

عبدالله عبدالرحمن11 · 23 يونيو 2021

لم يتم تكرار العملية فدالة ()getStaticPaths ودالة ()getStaticProps مختلفتين ولكلً منهما عمل مختلف

فدالة ()getStaticProps في التوليد الثابت Static Generation تقوم بجلب البيانات في وقت البناء build time

ودالة ()getStaticPaths في التوليد الثابت Static Generation تقوم بتحديد المسارات routes الديناميكية للصفحات المُعدة مسبقاً بناءً على البيانات

فعلى سبيل المثال عندما تستخدم صفحة ديناميكية ، والمسار يعتمد على بيانات خارجية ، في هذه الحالة نستطيع إستخدام دالة getStaticPaths لتحديد المسارات الديناميكية التي سيتم إضافتها للصفحة كما هو موضح في الكود الآتي

export async const getStaticProps = ({ params }) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();
  return {
    props: { post },
  };
}

export async function getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } }));
  return {
    paths,
    fallback: false,
  };
}

جلب البيانات في next js

السؤال

عبد النور محمد

2 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

عبدالله عبدالرحمن11

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية