Datu iegūšanas stratēģijas NextJS

Tie ir:

• Klienta puses atveidošana: CSR,
• Servera puses atveidošana: SSR,
• Statiska vietnes atveidošana: SSG,
• Inkrementālā statiskā reģenerācija: ISR.

NextJS, atšķirībā no vienkāršā React lietotnē ir pieejama funkcija, ko dēvē par iepriekšēju attēlošanu. Tas nozīmē, ka sākotnējās ielādes laikā tiek parādīts iepriekš renderēts HTML. Tradicionālajās React lietojumprogrammās visa lietotne tiek ielādēta un atveidota klienta pusē. Pēc tam, kad JS kods ir ielādēta, lietojumprogramma kļūst interaktīva.

Statiskā ģenerēšana

SSG HTML tiek ģenerēts izveides laikā un atkārtoti izmantots katram pieprasījumam. Pēc produkcijas izveides katrs pieprasījums atkārtoti izmantos šo statiski ģenerēto HTML failu.

Pastāv arī divu veidu statiskā ģenerēšana: ar un bez dati.

Pirmajā gadījumā HTML tiks ģenerēts pēc datu iegūšanas, atrisinot solījumu. Šajā gadījumā mēs varam izmantot getStaticProps datu iegūšanas metodi... bet tikai tad, ja izmantojat Next.js 9.3 vai jaunāku. Ja nē, padomājiet par tās atjaunināšanu, jo vecākā metode getInitialProps vairs nav ieteicama un tiks novecojusi. Šī metode arī tiek izsaukta katrā klienta puses navigācijā, tāpēc tā nav efektīva, ja nevēlaties iegūt datus katrā pieprasījumā.

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

Ļoti forša ir nesen izlaistā funkcija ISR (Incremental Static Regeneration), kas ir kaut kas starp SSG un SSR. Tā ļauj (izmantojot īpašu atslēgu revalidate) veikt lapas pakāpenisku atjaunošanu. Tas nozīmē, ka, izmantojot šo atslēgu, jums nav jāpārveido lietotne katru reizi, kad vēlaties saņemt no servera iegūto datu atjauninājumu. Vienkārši pievienojiet atslēgu revalidate, norādot atjaunošanas periodu sekundēs.

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

Tas nozīmē, ka, ja pieprasījumi tiks saņemti pēc šī perioda, serveris atkal ielādēs datus no servera.

Cita situācija ir tad, ja izmantojat dinamisku lapu un ceļš ir atkarīgs no kādiem ārējiem datiem. Tādā gadījumā varam izmantot metodi getStaticPaths, kas norāda, kuri dinamiskie ceļi ir iepriekš ielādējami:

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

eksportēt async funkciju 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,
  };
}

Ir iespējams ērti pārbaudīt, kuri dinamiskie maršruti ir izveidoti. Varat palaist nākamo izveidi un nākamo eksportēšanu, un pēc tam jums būs pieejama statiskā lietotnes versija jaunizveidotajā out direktorijā.

Tagad ierobežosim iepriekš izveidotos ceļus:

eksportēt async funkciju getStaticPaths() {
  return {
    paths: [{ { params: { id: "1" } } }, { params: { id: "2" } } }],
    fallback: false,
  };
}

Pēc nākamā eksporta palaišanas abos gadījumos (ar un bez ierobežota ceļu skaita) mēs varam pamanīt atšķirīgu amatu skaitu, kas atrodami my-appoutposts.

Tagad aplūkosim svarīgo un nepieciešamo rezerves parametru. Tas norāda, ko darīt, ja lapas izveides laikā tā nav iepriekš atveidota. Ja tas ir iestatīts uz true, tiek palaists getStaticProps un tiek ģenerēta šī lapa. Ja false, pēc mēģinājuma ielādēt šo konkrēto ceļu mēs saņemsim 404. Vēl viena lieta: lapas ar dublējošo iestatījumu, kas ieslēgts getStaticPaths, nevar eksportēt.

Zemāk redzēsiet rezultātus, mēģinot ielādēt vienu un to pašu dinamisko lapu abos gadījumos:

Pirmais gadījums (bez ierobežotiem ceļiem)

Otrais gadījums (ar ierobežotajiem ceļiem un dublēšanas iestatījumu uz false)

Otrais gadījums (ar ierobežotiem ceļiem un dublēšanas iestatījumu true)

Servera puses renderēšana

Galvenā atšķirība no SSG: katrā pieprasījumā tiek ģenerēts jauns HTML. Tas tiek izmantots galvenokārt tad, kad mēs saņemam ārējus datus. Šajā gadījumā nav nepieciešams pārbūvēt lietotni katru reizi, kad vēlamies atjaunināt datus no servera.

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

Metode getServerSideProps ir ļoti līdzīga metodei getStaticProps. Atšķirība ir tāda, ka getServerSideProps tiek izpildīts katrā pieprasījumā, bet getStaticProps tiek izpildīts vienreiz izveides laikā.

Klienta puses renderēšana

Izmantojot klienta puses atveidošanu, sākotnējā lapas ielāde ir nedaudz lēna. Saziņa ar serveri notiek izpildes laikā. To var izdarīt tradicionālākajā veidā:

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();
  }, []);

Varam izmantot arī citu risinājumu, ‘swr’ - React Hooks bibliotēku Vercel* datu iegūšanai, ko stingri iesaka NextJS veidotāji. SWR nozīmē State While Revalidate.

^* Datu avots: SWR pēc Vercel

importēt useSWR no "swr";


const Blog = () => {
 const fetcher = (url) => fetch(url).then((r) => r.json());
 const { data: posts = [], error } = useSWR(
    "https://jsonplaceholder.typicode.com/posts", fetcher);
 if (kļūda) return <div>Neizdevās ielādēt ziņojumus</div>;
 if (!posts.length) return <div>iekraušana...</div>;
 atgriezties (
    <>
      {posts.map((post) =&gt; (
            {post.title}
        ))}
    </>
}

Kopsavilkums

NextJS sniedz mums papildu iespēja izvēlēties, kuru no datu iegūšanas stratēģijām vēlamies izmantot katrā lapā. Mums nav jāievēro tikai viens risinājums visai lietojumprogrammai.

Īsais ceļvedis

• getServerSideProps - ja jums ir nepieciešams, lai katrā pieprasījumā iepriekš izkrāsotu lietotni ar iegūtajiem datiem.
• getStaticProps - ja datus var iegūt vienreiz izveides laikā un izmantot katrā pieprasījumā bez atjaunināšanas.
• getInitialProps - nav ieteicams, būs novecojusi
• getStaticPaths - dinamisko celiņu pirmspoguļveidošanai.

Lasīt vairāk:

Rails API un CORS. Apziņas piesitiens

Kāpēc jums (iespējams) vajadzētu izmantot Typescript?

Visaugstākās kvalitātes kods jūsu SaaS projektā. Kāpēc jums kā (netehniskajam) dibinātājam par to būtu jārūpējas?