Strategie načítání dat v NextJS

A to jsou:

• Vykreslování na straně klienta: CSR,
• Vykreslování na straně serveru: SSR,
• Statické vykreslování webu: SSG,
• Inkrementální statická regenerace: ISR.

NextJS, na rozdíl od obyčejného React nabízí funkci zvanou pre-rendering. To znamená, že se při prvním načtení zobrazí předrenderované HTML. V tradičních aplikacích React se celá aplikace načítá a vykresluje na straně klienta. Poté se po načtení JS kód je načtena, aplikace se stane interaktivní.

Statické generování

V SSG je kód HTML generován v době sestavení a znovu použit pro každý požadavek. Po vytvoření produkčního sestavení bude každý požadavek znovu používat tento staticky vygenerovaný soubor HTML.

Existují také dva typy statického generování: s daty a bez dat.

V prvním případě se HTML vygeneruje po načtení dat na základě vyřešení slibu. V tomto případě můžeme použít metodu getStaticProps pro načtení dat... ale pouze pokud používáte Next.js 9.3 nebo novější. Pokud ne, přemýšlejte o aktualizaci, protože starší metoda getInitialProps se již nedoporučuje a bude zastaralá. Tato metoda se také volá při každé navigaci na straně klienta, takže není efektivní, pokud nechcete načítat data při každém požadavku.

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

Opravdu skvělá je nově vydaná funkce nazvaná ISR (Incremental Static Regeneration), což je něco mezi SSG a SSR. Umožňuje (pomocí specifického klíče s názvem revalidate) provést inkrementální regeneraci stránky. To znamená, že s tímto klíčem nemusíte aplikaci znovu vytvářet pokaždé, když chcete získat aktualizaci dat načtených ze serveru. Stačí přidat klíč revalidate s periodou revalidace v sekundách.

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

To znamená, že pokud přijdou požadavky po uplynutí této doby, budou data ze serveru načtena znovu.

Jiná situace nastane, když použijete dynamickou stránku a cesta závisí na externích datech. V takovém případě můžeme použít metodu getStaticPaths, která říká, které dynamické cesty mají být přednačteny:

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

Existuje pěkný způsob, jak zkontrolovat, které dynamické trasy byly vytvořeny. Můžete spustit další sestavení a další export a poté budete mít statickou verzi aplikace v nově vytvořeném adresáři out.

Omezme nyní cesty před sestavením:

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

Po spuštění dalšího exportu si můžeme v obou případech (s omezeným počtem cest i bez něj) všimnout rozdílného počtu příspěvků nalezených v my-appoutposts.

Podívejme se nyní blíže na klíčový a požadovaný záložní parametr. Ten říká, co se má udělat, pokud stránka nebyla v době sestavení předrenderována. Pokud je nastaven na hodnotu true, spustí se funkce getStaticProps a vygeneruje tuto stránku. Pokud je false, po pokusu o načtení této konkrétní cesty dostaneme 404. Další věc: stránky s fallbackem, které jsou povoleny v getStaticPaths, nelze exportovat.

Níže najdete výsledky pokusu o načtení stejné dynamické stránky v obou případech:

První případ (bez omezených cest)

Druhý případ (s omezeným počtem cest a nastavením funkce fallback na hodnotu false)

Druhý případ (s omezeným počtem cest a nastavením funkce fallback na hodnotu true)

Vykreslování na straně serveru

Hlavní rozdíl oproti SSG: při každém požadavku se generuje nové HTML. Používá se hlavně tehdy, když načítáme nějaká externí data. V takovém případě není nutné aplikaci přestavovat pokaždé, když chceme aktualizovat data ze serveru.

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

Metoda getServerSideProps vypadá velmi podobně jako metoda getStaticProps. Rozdíl je v tom, že getServerSideProps se spouští při každém požadavku, zatímco getStaticProps se spouští jednou v době sestavení.

Vykreslování na straně klienta

Při vykreslování na straně klienta je počáteční načítání stránky trochu pomalejší. Komunikace se serverem probíhá za běhu. Můžete ji provádět tradičnějším způsobem:

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

Můžeme také použít jiné řešení, 'swr' - React Háčky knihovnu pro načítání dat Vercel*, kterou tvůrci NextJS důrazně doporučují. SWR je zkratka pro State While Revalidate (stav při opětovném ověření).

^* Zdroj dat: SWR od společnosti Vercel

import useSWR z "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>Nepodařilo se načíst příspěvky</div>;
 if (!posts.length) return <div>načítání...</div>;
 return (
    <>
      {posts.map((post) =&gt; (
            {post.title}
        ))}
    </>
}

Souhrn

NextJS dává nás další možnost volby, kterou ze strategií načítání dat chceme na každé stránce použít. Nemusíme se řídit pouze jedním řešením pro celou aplikaci.

Zkratka

• getServerSideProps - pokud potřebujete aplikaci předvyplnit při každém požadavku pomocí načtených dat.
• getStaticProps - pokud lze data načíst jednou při sestavení a použít je při každém požadavku bez aktualizace.
• getInitialProps - nedoporučuje se, bude zastaralé
• getStaticPaths - pro předrenderování dynamických cest

Přečtěte si více:

Rozhraní Rails API a CORS. Kousek vědomí

Proč byste (pravděpodobně) měli používat Typescript?

Nejvyšší kvalita kódu v projektu SaaS. Proč byste se o to jako (netechnický) zakladatel měli zajímat?