Strategier för datahämtning i NextJS

Och dessa är..:

• Rendering på klientsidan: CSR,
• Rendering på serversidan: SSR,
• Rendering av statisk webbplats: SSG,
• Inkrementell statisk regenerering: ISR.

NextJS, till skillnad från den vanliga React-appen, erbjuder en funktion som kallas pre-rendering. Detta innebär att förrenderad HTML visas under den första laddningen. I traditionella React-applikationer laddas och renderas hela appen på klientens sida. Sedan, efter att JS kod laddas blir applikationen interaktiv.

Statisk generering

I SSG genereras HTML-filen under byggtiden och återanvänds för varje begäran. När en produktionsbyggnad har skapats kommer varje begäran att återanvända den statiskt genererade HTML-filen.

Det finns också två typer av statisk generering: med och utan data.

I det första fallet kommer HTML att genereras efter att data har hämtats genom att löftet har lösts. I det här fallet kan vi använda datahämtningsmetoden getStaticProps ... men bara om du använder Next.js 9.3 eller nyare. Om inte, tänk på att uppgradera den, eftersom den äldre getInitialProps-metoden inte längre rekommenderas och kommer att avskrivas. Den här metoden anropas också i varje navigering på klientsidan, så den är inte effektiv om du inte vill hämta data vid varje begäran.

export async funktion getStaticProps() {
  const res = vänta på hämtning("https://jsonplaceholder.typicode.com/posts");
  const inlägg = await res.json();
  returnerar {
    rekvisita: { inlägg },
  };
} 

Det riktigt häftiga är en nyligen släppt funktion som heter ISR (Incremental Static Regeneration), som är något mellan SSG och SSR. Det gör att du (genom att använda en specifik nyckel som heter revalidate) kan göra sidan stegvis regenererad. Det innebär att du med den här nyckeln inte behöver bygga om appen varje gång du vill få en uppdatering av de data som hämtas från servern. Lägg bara till revalidate-nyckeln med revalideringsperioden i sekunder.

export async funktion getStaticProps() {
  const res = vänta på hämtning("https://jsonplaceholder.typicode.com/posts");
  const inlägg = await res.json();
  return {
    rekvisita: {
      inlägg,
    },
    revalidate: 30,
  };
}

Det innebär att om förfrågningar kommer efter denna period kommer data att hämtas från servern igen.

En annan situation är när du använder en dynamisk sida och sökvägen beror på vissa externa data. I det fallet kan vi använda metoden getStaticPaths för att tala om vilka dynamiska sökvägar som ska laddas i förväg:

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

export asynkron funktion getStaticPaths() {
  const res = vänta på hämtning("https://jsonplaceholder.typicode.com/posts");
  const posts = avvakta res.json();
  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } }));
  return {
    sökvägar,
    fallback: false,
  };
}

Det finns ett bra sätt att kontrollera vilka dynamiska vägar som har skapats. Du kan köra nästa build och nästa export och efter det kommer du att ha en statisk version av din app i den nyskapade out-katalogen.

Låt oss nu begränsa förbyggnadsvägarna:

export asynkron funktion getStaticPaths() {
  return {
    sökvägar: [{ params: { id: "1" } }, { params: { id: "2" } }],
    fallback: false,
  };
}

Efter att ha kört nästa export kan vi i båda fallen (med och utan ett begränsat antal sökvägar) notera ett olika antal inlägg som finns i my-appoutposts.

Låt oss nu ta en närmare titt på den viktiga och obligatoriska fallback-parametern. Den anger vad som ska göras om sidan inte förrenderades vid byggtiden. Om den är inställd på true körs getStaticProps och genererar den sidan. Om den är falsk får vi 404 efter att ha försökt ladda den specifika sökvägen. En annan sak: sidor med fallback som är aktiverade i getStaticPaths kan inte exporteras.

Nedan ser du resultatet av att försöka ladda samma dynamiska sida i båda fallen:

Första fallet (utan begränsade banor)

Andra fallet (med begränsade sökvägar och fallback inställd på false)

Andra fallet (med begränsade sökvägar och fallback inställd på true)

Rendering på serversidan

Den största skillnaden med SSG är att ny HTML genereras vid varje förfrågan. Det används mest när vi hämtar externa data. I det här fallet finns det inget behov av att bygga om appen varje gång vi vill uppdatera data från servern.

export asynkron funktion getServerSideProps() {
  const res = vänta på hämtning("https://jsonplaceholder.typicode.com/posts");
  const inlägg = await res.json();
  return {
    rekvisita: {
      inlägg,
    },
  };
}

Metoden getServerSideProps ser mycket lik ut som getStaticProps. Skillnaden är att getServerSideProps körs vid varje förfrågan, medan getStaticProps körs en gång under build-tiden.

Rendering på klientsidan

Med rendering på klientsidan är den första laddningen av sidan lite långsam. Kommunikationen med servern sker under körtiden. Du kan göra det på ett mer traditionellt sätt:

const Blog = () => {


 const [posts, setPosts] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = vänta på hämtning(
     "https://jsonplaceholder.typicode.com/posts");
      const posts = await res.json();
      setPosts(inlägg);
    };
    fetchData();
  }, []);

Vi kan också använda en annan lösning, "swr" - React Hooks-bibliotek för datahämtning av Vercel *, som starkt rekommenderas av NextJS-skaparna. SWR står för State While Revalidate.

^* Datakälla: SWR av Vercel

importera useSWR från "swr";


const Blog = () => {
 const fetcher = (url) => fetch(url).then((r) => r.json());
 const { data: inlägg = [], fel } = useSWR(
    "https://jsonplaceholder.typicode.com/posts", fetcher);
 if (fel) return <div>Misslyckades med att ladda inlägg</div>;
 if (!inlägg.längd) retur <div>lastning...</div>;
 returnera (
    <>
      {posts.map((post) =&gt; (
            {post.titel}
        ))}
    </>
}

Sammanfattning

NextJS ger oss ytterligare en möjlighet att välja vilken av datahämtningsstrategierna vi vill använda på varje sida. Vi behöver inte bara följa en lösning för hela applikationen.

Genväg

• getServerSideProps - när du behöver förrendera appen vid varje begäran med hämtade data
• getStaticProps - när data kan hämtas en gång vid byggtiden och användas vid varje förfrågan utan uppdatering
• getInitialProps - rekommenderas inte, kommer att avskrivas
• getStaticPaths - för förrendering av dynamiska sökvägar

Läs mer om detta:

Rails API & CORS. Ett stänk av medvetenhet

Varför bör du (förmodligen) använda Typescript?

Kod av högsta kvalitet i ditt SaaS-projekt. Varför ska du bry dig om det som en (icke-teknisk) grundare?