Στρατηγικές άντλησης δεδομένων στο NextJS

Και αυτά είναι:

• Απεικόνιση από την πλευρά του πελάτη: CSR,
• Απεικόνιση από την πλευρά του διακομιστή: SSR,
• Στατική απόδοση ιστότοπου: SSG,
• Σταδιακή στατική αναγέννηση: ISR.

Το NextJS, σε αντίθεση με την απλή εφαρμογή React, προσφέρει ένα χαρακτηριστικό που ονομάζεται προ-προεπισκόπηση. Αυτό σημαίνει ότι κατά την αρχική φόρτωση εμφανίζεται η προ-αναπαραγόμενη HTML. Στις παραδοσιακές εφαρμογές React, ολόκληρη η εφαρμογή φορτώνεται και απεικονίζεται στην πλευρά του πελάτη. Στη συνέχεια, αφού η JS κωδικός φορτώνεται, η εφαρμογή γίνεται διαδραστική.

Στατική παραγωγή

Στην SSG, η HTML παράγεται κατά τη διάρκεια της κατασκευής και επαναχρησιμοποιείται για κάθε αίτηση. Αφού δημιουργηθεί ένα build παραγωγής, κάθε αίτηση θα επαναχρησιμοποιεί αυτό το στατικά παραγόμενο αρχείο HTML.

Υπάρχουν επίσης δύο τύποι στατικής παραγωγής: με και χωρίς δεδομένα.

Στην πρώτη περίπτωση, η HTML θα δημιουργηθεί μετά την ανάκτηση των δεδομένων με την επίλυση της υπόσχεσης. Σε αυτή την περίπτωση, μπορούμε να χρησιμοποιήσουμε τη μέθοδο άντλησης δεδομένων getStaticProps... αλλά μόνο αν χρησιμοποιείτε Next.js 9.3 ή νεότερη έκδοση. Αν όχι, σκεφτείτε να το αναβαθμίσετε, επειδή η παλαιότερη μέθοδος getInitialProps δεν συνιστάται πλέον και θα καταργηθεί. Αυτή η μέθοδος καλείται επίσης σε κάθε πλοήγηση στην πλευρά του πελάτη, οπότε δεν είναι αποδοτική αν δεν θέλετε να φέρνετε δεδομένα σε κάθε αίτηση.

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts"),
  const posts = await res.json(),
  return {
    props: { posts },
  };
} 

Το πραγματικά καλό πράγμα είναι ένα νέο χαρακτηριστικό που κυκλοφόρησε πρόσφατα και ονομάζεται ISR (Incremental Static Regeneration), το οποίο είναι κάτι μεταξύ SSG και SSR. Σας επιτρέπει (χρησιμοποιώντας ένα συγκεκριμένο κλειδί που ονομάζεται revalidate) να κάνετε τη σελίδα να αναγεννάται σταδιακά. Αυτό σημαίνει ότι με αυτό το κλειδί δεν χρειάζεται να ξαναχτίζετε την εφαρμογή κάθε φορά που θέλετε να λάβετε μια ενημέρωση των δεδομένων που λαμβάνονται από τον διακομιστή. Απλά προσθέστε το κλειδί revalidate με την περίοδο επανεπικύρωσης σε δευτερόλεπτα.

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts"),
  const posts = await res.json(),
  return {
    props: {
      posts,
    },
    revalidate: 30,
  };
}

Αυτό σημαίνει ότι αν οι αιτήσεις έρθουν μετά από αυτή την περίοδο, τότε θα αντλήσει τα δεδομένα από τον διακομιστή ξανά.

Μια άλλη περίπτωση είναι όταν χρησιμοποιείτε μια δυναμική σελίδα και η διαδρομή εξαρτάται από κάποια εξωτερικά δεδομένα. Σε αυτή την περίπτωση, μπορούμε να χρησιμοποιήσουμε τη μέθοδο 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,
  };
}

Υπάρχει ένας ωραίος τρόπος για να ελέγξετε ποιες δυναμικές διαδρομές έχουν δημιουργηθεί. Μπορείτε να εκτελέσετε την επόμενη κατασκευή και την επόμενη εξαγωγή και μετά από αυτό θα έχετε μια στατική έκδοση της εφαρμογής σας στον πρόσφατα δημιουργημένο κατάλογο out.

Ας περιορίσουμε τώρα τα μονοπάτια προ-δημιουργίας:

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: "1" } }, { params: { id: "2" } } }],
    fallback: false,
  };
}

Μετά την εκτέλεση της επόμενης εξαγωγής, μπορούμε να παρατηρήσουμε και στις δύο περιπτώσεις (με και χωρίς περιορισμένο αριθμό μονοπατιών) διαφορετικό αριθμό αναρτήσεων που βρέθηκαν στο my-appoutposts.

Ας ρίξουμε τώρα μια πιο προσεκτική ματιά στην κρίσιμη και απαιτούμενη παράμετρο εφεδρείας. Λέει τι πρέπει να γίνει αν η σελίδα δεν έχει προ-αναδιπλωθεί κατά τη στιγμή της κατασκευής. Εάν έχει οριστεί σε true, το getStaticProps εκτελείται και δημιουργεί αυτή τη σελίδα. Αν είναι false, θα λάβουμε 404 μετά την προσπάθεια φόρτωσης της συγκεκριμένης διαδρομής. Κάτι άλλο: οι σελίδες με fallback που είναι ενεργοποιημένες στο getStaticPaths δεν μπορούν να εξαχθούν.

Παρακάτω μπορείτε να δείτε τα αποτελέσματα της προσπάθειας φόρτωσης της ίδιας δυναμικής σελίδας και στις δύο περιπτώσεις:

Πρώτη περίπτωση (χωρίς περιορισμένες διαδρομές)

Δεύτερη περίπτωση (με περιορισμένες διαδρομές και επαναφορά σε false)

Δεύτερη περίπτωση (με περιορισμένες διαδρομές και επαναφορά σε true)

Εκτέλεση από την πλευρά του διακομιστή

Η κύρια διαφορά με την SSG: νέα HTML δημιουργείται σε κάθε αίτηση. Χρησιμοποιείται κυρίως όταν αντλούμε κάποια εξωτερικά δεδομένα. Σε αυτή την περίπτωση, δεν χρειάζεται να ξαναφτιάχνουμε την εφαρμογή κάθε φορά που θέλουμε να ενημερώσουμε τα δεδομένα από τον διακομιστή.

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts"),
  const posts = await res.json(),
  return {
    props: {
      posts,
    },
  };
}

Η μέθοδος getServerSideProps μοιάζει πολύ με τη μέθοδο getStaticProps. Η διαφορά είναι ότι η getServerSideProps εκτελείται σε κάθε αίτηση, ενώ η getStaticProps εκτελείται μία φορά κατά τη διάρκεια της κατασκευής.

Απεικόνιση από την πλευρά του πελάτη

Με την απόδοση από την πλευρά του πελάτη, η αρχική φόρτωση της σελίδας είναι λίγο αργή. Η επικοινωνία με τον διακομιστή γίνεται κατά τον χρόνο εκτέλεσης. Μπορείτε να το κάνετε με έναν πιο παραδοσιακό τρόπο:

const Blog = () => {


 const [posts, setPosts] = useState([]),
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(
     "https://jsonplaceholder.typicode.com/posts"),
      const posts = await res.json(),
      setPosts(posts),
    };
    fetchData(),
  }, []);

Επίσης, μπορούμε να χρησιμοποιήσουμε μια άλλη λύση, την 'swr' - βιβλιοθήκη React Hooks για την ανάκτηση δεδομένων από την Vercel*, η οποία συνιστάται ανεπιφύλακτα από τους δημιουργούς του NextJS. Το SWR σημαίνει State While Revalidate (Κατάσταση κατά την επικύρωση).

^* Πηγή δεδομένων: SWR από την Vercel

import useSWR from "swr",


const Blog = () => { {
 const fetcher = (url) => fetch(url).then((r) => r.json()),
 const { data: posts = [], error } = useSWR(
    "https://jsonplaceholder.typicode.com/posts", fetcher),
 if (error) return <div>Απέτυχε να φορτώσει θέσεις</div>;
 if (!posts.length) return <div>φόρτωση...</div>;
 επιστροφή (
    <>
      {posts.map((post) =&gt; (
            {post.title}
        ))}
    </>
}

Περίληψη

Το NextJS μας δίνει την πρόσθετη δυνατότητα να επιλέξουμε ποια από τις στρατηγικές άντλησης δεδομένων θέλουμε να χρησιμοποιήσουμε σε κάθε σελίδα. Δεν χρειάζεται να ακολουθήσουμε μόνο μία λύση για ολόκληρη την εφαρμογή.

Συντόμευση

• getServerSideProps - όταν πρέπει να κάνετε προ-αναδίπλωση της εφαρμογής σε κάθε αίτηση με τα δεδομένα που έχουν ληφθεί
• getStaticProps - όταν τα δεδομένα μπορούν να αντληθούν μία φορά κατά το χρόνο κατασκευής και να χρησιμοποιηθούν σε κάθε αίτηση χωρίς ενημέρωση
• getInitialProps - δεν συνιστάται, θα καταργηθεί
• getStaticPaths - για την προ-προβολή δυναμικών διαδρομών

Διαβάστε περισσότερα:

Rails API & CORS. Μια πινελιά συνείδησης

Γιατί πρέπει (πιθανώς) να χρησιμοποιήσετε την Typescript;

Υψηλότερη ποιότητα κώδικα στο έργο σας SaaS. Γιατί πρέπει να ενδιαφέρεστε γι' αυτό ως (μη τεχνικός) ιδρυτής;