მონაცემთა მიღება API-ებიდან Next.js: getStaticProps-ისა და getServerSideProps-ის გამოყენება

აპლიკაციის შემუშავების პროცესში Next.js, API-ებიდან მონაცემების მიღება გადამწყვეტი ასპექტია დინამიური შინაარსის ჩვენებისთვის. ეს სტატია დაგეხმარებათ, გამოიყენოთ getStaticProps სტატიკური მონაცემების მიღება მშენებლობის პროცესში და გამოიყენოთ getServerSideProps API-ებიდან მონაცემების მისაღებად თითოეული მოთხოვნისას.

getStaticProps-ის გამოყენებით

getStaticProps არის ჩაშენებული მეთოდი, Next.js რომელიც მხარს უჭერს სტატიკური მონაცემების მიღებას მშენებლობის პროცესში. ის საშუალებას გაძლევთ შექმნათ სტატიკური გვერდები მოთხოვნილი მონაცემებით, რომლებიც წინასწარ არის გამოსახული აპლიკაციის განთავსებამდე. აქ არის გამოყენების ძირითადი მაგალითი getStaticProps:

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

ზემოთ მოყვანილ მაგალითში, ჩვენ ვიყენებთ fetch API-დან მონაცემების გამოკითხვისთვის და მონაცემების დასაბრუნებლად.

GetServerSideProps-ის გამოყენებით

getServerSideProps არის კიდევ ერთი მეთოდი, Next.js რომელიც საშუალებას გაძლევთ მიიღოთ მონაცემები API-ებიდან თითოეულ მოთხოვნაზე. ეს უზრუნველყოფს, რომ შინაარსი ყოველთვის განახლებული და დინამიური იყოს. აქ არის გამოყენების მაგალითი getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

მეთოდი getServerSideProps მოითხოვს მონაცემებს API-დან ყოველ ჯერზე, როცა გვერდზე შეიტანება მოთხოვნა.

დასკვნა

ამ განყოფილებაში თქვენ ისწავლეთ როგორ ეფექტურად მიიღოთ მონაცემები API-ებიდან თქვენს Next.js აპლიკაციაში. getStaticProps და გამოყენებით getServerSideProps, შეგიძლიათ თქვენს აპლიკაციაში მოქნილად აჩვენოთ როგორც სტატიკური, ასევე დინამიური შინაარსი.