Stefnur við gagnaleit í NextJS

Og þessir eru:

• Sýning á viðskiptavina hlið: CSR,
• Þjónushliðsköggun: SSR,
• Stöðug síðuútgáfa: SSG,
• Stigvaxandi statísk endurnýjun: ISR.

NextJS, ólíkt hinu einföldu React appið býður upp á eiginleika sem kallast forframgerð. Þetta þýðir að forframgreitt HTML er sýnt við upphafshleðslu. Í hefðbundnum React-forritum er allt forritið hlaðið og framkallað á viðskiptavinasíðunni. Síðan, eftir að JS kóði Þegar það er hlaðið, verður forritið gagnvirkt.

Stöðug myndun

Í SSG er HTML-ið búið til við byggingu og endurnýtt fyrir hverja beiðni. Eftir að framleiðslubygging hefur verið búin til mun hver beiðni endurnýta þá statískt búna HTML-skrá.

Það eru einnig tvær tegundir af kyrrstæðri myndun: með og án gögn.

Í fyrsta tilvikinu verður HTML-kóðinn búinn til eftir að gögnum hefur verið sótt með því að uppfylla loforðið. Í þessu tilfelli getum við notað getStaticProps gagnanálgunaraðferðina… en aðeins ef þú ert að nota Next.js 9.3 eða nýrri. Ef ekki, íhugaðu að uppfæra, því eldri getInitialProps-aðferðin er ekki lengur mælt með og verður úrelt. Þessi aðferð er einnig kölluð við hverja vafrahliðarleiðsögn, svo það er ekki skilvirkt ef þú vilt ekki sækja gögn í hverri beiðni.

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

Það sem er virkilega flott er nýlega útgefin aðgerð sem kallast ISR (Incremental Static Regeneration), sem er einhvers staðar á milli SSG og SSR. Hún gerir þér kleift (með því að nota sérstakan lykil sem kallast revalidate) að láta síðuna endurskapa sig smám saman. Þetta þýðir að með þessum lykli þarftu ekki að endurbyggja forritið í hvert skipti sem þú vilt fá uppfærslu á gögnum sem sótt eru af netþjóninum. Bættu einfaldlega við revalidate-lyklinum með endurgildistímabilinu í sekúndum.

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

Það þýðir að ef beiðnir berast eftir þann tíma, þá sækir það gögnin aftur frá netþjóninum.

Önnur aðstaða er þegar þú notar dýnamíska síðu og slóðin fer eftir einhverjum ytri gögnum. Í því tilfelli getum við notað getStaticPaths-aðferðina til að tilgreina hvaða dýnamískar slóðir eigi að forhlaða:

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,
  };
}

Það er góð leið til að athuga hvaða dýnamísku leiðirnar hafa verið búnar til. Þú getur keyrt next build og next export og eftir það munt þú hafa statíska útgáfu af forritinu þínu í nýlega búna útgáfu-möppunni.

Takmörkum nú foruppbyggingarleiðirnar:

útflutningur async-fall getStaticPaths() {
  return {
    paths: [{ params: { id: "1" } }, { params: { id: "2" } }],
    fallback: false,
  };
}

Eftir að hafa keyrt næstu útflutning sjáum við í báðum tilfellum (með og án takmarkaðs fjölda slóða) mismunandi fjölda færslna sem finnast í my-appoutposts.

Skoðum nú nánar þennan mikilvæga og nauðsynlega fallback-valkost. Hann segir til um hvað skuli gera ef síðan var ekki forframkölluð við byggingu. Ef hann er stilltur á true keyrir getStaticProps og býr til þá síðu. Ef hann er stilltur á false fáum við 404 þegar reynt er að hlaða þeirri tilteknu slóð. Annað: síður með fallback sem eru virkjaðar í getStaticPaths má ekki útflokka.

Hér fyrir neðan má sjá niðurstöðurnar úr tilrauninni til að hlaða sama dýnamíska síðunni í báðum tilfellum:

Fyrsta tilfellið (án takmarkaðra brauta)

Annar tilvik (með takmörkuðum leiðum og fallback stillt á false)

Annar tilvik (með takmörkuðum leiðum og fallback stillt á satt)

Sýning á þjónahlið

Helsti munurinn á SSG er sá að nýtt HTML er búið til við hverja beiðni. Það er aðallega notað þegar við sækjum gögn utan frá. Í þessu tilfelli þarf ekki að endurbyggja forritið í hvert sinn sem við viljum uppfæra gögnin frá netþjóninum.

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

getServerSideProps-aðferðin lítur mjög svipað út og getStaticProps. Munurinn er sá að getServerSideProps keyrir við hverja beiðni, á meðan getStaticProps keyrir einu sinni við byggingu.

Sýning á viðskiptavinasíðunni

Með client-side rendering er upphafleg hleðsla síðunnar dálítið hæg. Samskipti við netþjóninn eiga sér stað á keyrslutíma. Þú getur gert það á hefðbundnari hátt:

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

Einnig getum við notað aðra lausn, ‘swr’ – React Hooks-bókasafn fyrir gagnanám frá Vercel*, sem NextJS-hönnuðir mæla eindregið með. SWR stendur fyrir State While Revalidate.

^* Gagnaveitur: SWR af 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>Ekki tókst að hlaða færslum</div>;
 ef (!posts.length) skila <div>Að hlaða...</div>;
 skila (
    <>
      {posts.map((post) =&gt; (
 {post.title}
 ))}
    </>
}

Yfirlit

NextJS gefur okkur Viðbótarmöguleiki til að velja hvaða gagnaherningaraðferð við viljum nota á hverri síðu. Við þurfum ekki að fylgja einni lausn fyrir alla forritið.

Stuttleið

• getServerSideProps – þegar þú þarft að forframkalla appið við hverja beiðni með sóttum gögnum
• getStaticProps – þegar gögnum er hægt að sækja einu sinni við byggingu og nota í hverri beiðni án uppfærslu
• getInitialProps – ekki mælt með, verður úrelt
• getStaticPaths – til forframköllunar á breytilegum slóðum

Lesa meira:

Rails API og CORS. Smá meðvitund

Af hverju ættir þú (líklega) að nota TypeScript?

Hæstu gæðakóði í SaaS-verkefni þínu. Af hverju ættir þú sem (ekki tæknilegur) stofnandi að hafa áhuga á því?