Duomenų gavimo strategijos "NextJS

Tai yra:

• Atvaizdavimas kliento pusėje: CSR,
• Atvaizdavimas serverio pusėje: SSR,
• Statinis svetainės atvaizdavimas: SSG,
• Inkrementinis statinis regeneravimas: ISR.

NextJS, skirtingai nei paprastas React programėlėje siūloma funkcija, vadinama išankstiniu atvaizdavimu. Tai reiškia, kad pradinio įkėlimo metu rodomas iš anksto atvaizduotas HTML. Tradicinėse React programose visa programa įkeliama ir atvaizduojama kliento pusėje. Tada, kai JS kodas įkeliama, programa tampa interaktyvi.

Statinis generavimas

SSG sistemoje HTML generuojamas kūrimo metu ir pakartotinai naudojamas kiekvienai užklausai. Sukūrus produkcinį surinkimą, kiekviena užklausa pakartotinai naudos šį statiškai sugeneruotą HTML failą.

Taip pat yra dviejų tipų statinis generavimas: su ir be duomenys.

Pirmuoju atveju HTML kodas bus sukurtas gavus duomenis išsprendus pažadą. Šiuo atveju galime naudoti duomenų gavimo metodą getStaticProps... bet tik jei naudojate Next.js 9.3 arba naujesnę versiją. Jei ne, pagalvokite apie atnaujinimą, nes senesnis getInitialProps metodas nebėra rekomenduojamas ir bus atšauktas. Šis metodas taip pat yra iškviečiamas kiekvienoje kliento pusėje esančioje navigacijoje, todėl jis nėra efektyvus, jei nenorite gauti duomenų kiekvienos užklausos metu.

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

Tikrai šaunus dalykas yra naujai išleista funkcija, vadinama ISR (Incremental Static Regeneration), kuri yra kažkas tarpinio tarp SSG ir SSR. Ji leidžia (naudojant specialų raktą, vadinamą "revalidate") puslapį atkurti palaipsniui. Tai reiškia, kad naudojant šį raktą nereikia iš naujo kurti programos kiekvieną kartą, kai norite gauti iš serverio paimtų duomenų atnaujinimą. Tiesiog pridėkite raktą revalidate, nurodydami atnaujinimo laikotarpį sekundėmis.

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

Tai reiškia, kad jei užklausos bus gautos po šio laikotarpio, jis vėl paims duomenis iš serverio.

Kitas atvejis - kai naudojate dinaminį puslapį, o kelias priklauso nuo tam tikrų išorinių duomenų. Tokiu atveju galime naudoti metodą getStaticPaths, nurodantį, kurie dinaminiai keliai turėtų būti iš anksto įkelti:

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

eksportas async funkcija 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,
  };
}

Yra geras būdas patikrinti, kurie dinaminiai maršrutai buvo sukurti. Galite paleisti kitą kūrimą ir kitą eksportą, o po to turėsite statinę savo programos versiją naujai sukurtame out kataloge.

Dabar apribokime išankstinio kūrimo kelius:

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

Atlikę kitą eksportą, galime pastebėti, kad abiem atvejais (su ribotu kelių skaičiumi ir be jo) skiriasi mano-appoutposts rastų pranešimų skaičius.

Dabar atidžiau pažvelkime į esminį ir būtiną atsarginį parametrą. Jis nurodo, ką daryti, jei puslapis nebuvo iš anksto atvaizduotas kūrimo metu. Jei jis nustatytas į true, paleidžiamas getStaticProps ir sugeneruojamas tas puslapis. Jei false, bandydami įkelti tą konkretų kelią gausime 404. Kitas dalykas: puslapių su grįžtamuoju ryšiu, kurie įjungti getStaticPaths, negalima eksportuoti.

Toliau pateikiami rezultatai, gauti bandant įkelti tą patį dinaminį puslapį abiem atvejais:

Pirmasis atvejis (be ribotų kelių)

Antrasis atvejis (su ribotais keliais ir grįžtamuoju nustatymu false)

Antrasis atvejis (su ribotais keliais ir grįžtamuoju nustatymu true)

Atvaizdavimas serverio pusėje

Pagrindinis skirtumas, palyginti su SSG, yra tas, kad kiekviena užklausa generuoja naują HTML. Tai dažniausiai naudojama, kai gauname išorinius duomenis. Tokiu atveju nereikia iš naujo kurti programos kiekvieną kartą, kai norime atnaujinti duomenis iš serverio.

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

GetServerSideProps metodas labai panašus į getStaticProps metodą. Skirtumas tas, kad getServerSideProps paleidžiamas kiekvieną užklausą, o getStaticProps paleidžiamas vieną kartą kūrimo metu.

Kliento pusės atvaizdavimas

Naudojant kliento pusės atvaizdavimą, pradinis puslapio įkėlimas yra šiek tiek lėtas. Ryšys su serveriu vyksta paleidimo metu. Galite tai daryti tradiciškesniu būdu:

const Dienoraštis = () => {


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

Taip pat galime naudoti kitą sprendimą, ‘swr’ - React "Hooks" biblioteką, skirtą "Vercel "* duomenų paėmimui, kurią primygtinai rekomenduoja "NextJS" kūrėjai. SWR reiškia State While Revalidate (būseną, kol patvirtinama).

^* Duomenų šaltinis: SWR pagal "Vercel

importuoti useSWR iš "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>Nepavyko įkelti pranešimų</div>;
 if (!posts.length) return <div>pakrovimas...</div>;
 grąžinti (
    <>
      {posts.map((post) =&gt; (
            {post.title}
        ))}
    </>
}

Santrauka

NextJS suteikia mus papildoma galimybė pasirinkti, kurią iš duomenų gavimo strategijų norime naudoti kiekviename puslapyje. Mums nereikia laikytis tik vieno sprendimo visai programai.

Trumpasis adresas

• getServerSideProps - kai reikia iš anksto atvaizduoti programą kiekvienoje užklausoje su gautais duomenimis.
• getStaticProps - kai duomenys gali būti paimti vieną kartą kūrimo metu ir naudojami kiekvienoje užklausoje be jokių atnaujinimų.
• getInitialProps - nerekomenduojama, bus panaikinta
• getStaticPaths - išankstiniam dinaminių kelių atvaizdavimui

Skaityti daugiau:

Rails API ir CORS. Sąmoningumo brūkšnelis

Kodėl turėtumėte (tikriausiai) naudoti Typescript?

Aukščiausios kokybės kodas jūsų SaaS projekte. Kodėl tai turėtų rūpėti jums kaip (ne techninio profilio) steigėjui?