Ανάκτηση δεδομένων από 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, μπορείτε να εμφανίσετε τόσο στατικό όσο και δυναμικό περιεχόμενο με ευελιξία στην εφαρμογή σας.