Generování statického webu v Nextjs pomocí funkce getStaticProps().

Původně zveřejněno zde!

Obsah

• Co je generování statického webu?
• Pomocí getStaticProps() funkce

Co je generování statického webu?

Stejně jako slovo statický znamená neměnit. 🧘‍♂️

Mezi výhody patří:

• Lepší SEO 🕶
• Výkon 🚀
• Lze hostovat v CDN 🌍
• Ke spuštění nepotřebuje JavaScript (většinou HTML) ⚙️
• Velmi méně věcí k analýze ze serveru na klienta 🌬

Proč tedy potřebujeme statický web?

Vezměme si příklad vstupní stránky pro společnost, vstupní stránka nepotřebuje žádný typ dynamického obsahu, jako je stahování dat z různých rozhraní API a jejich zobrazování podle jejich uživatelů.

Uživatel, který vstoupí na vstupní stránku společnosti, musí vidět, o čem daná společnost je, její hlavní funkce, úspěchy atd., což jsou všechno statické věci.

Druhým příkladem je tento blog, tento blog je staticky generován ze souborů markdown. Jeho hlavním účelem je poskytnout vám informace. Nemění ani nevytahuje data z různých rozhraní API.

Dynamické weby zahrnují weby jako Facebook, Twitter atd., které mění obsah podle svých uživatelů.

Pojďme se tedy ponořit! 🏊‍♀️

Generování statického webu v nextjs

Abychom lépe využili generování statického webu v Nextjs, pochopme getStaticProps() funkce.

Pomocí getStaticProps() funkce:

Tato funkce je přidána do Nextjs page tak, aby načítal data v době sestavování.

Nejprve si udělejme jednoduchou stránku Nextjs s názvem todos.js uvnitř našeho pages složku.

// Todos.js Page
const Todos = () => {
  return <h1>Todos</h1>;
};

export default Todos;

přidáme getStaticProps() funkce.

const Todos = () => {
  return <h1>Todos</h1>;
};

export default Todos;

// add getStaticProps() function
export async function getStaticProps() {}

getStaticProps() funkce poskytuje rekvizity potřebné pro komponentu Todos k vykreslení věcí, když Nextjs vytvoří stránku.

Všimněte si, že jsme přidali async klíčové slovo, je to potřeba, aby Nextjs věděl, že má předvykreslit naše Todos stránku v době sestavení.

pojďme napsat nějaký kód do getStaticProps() funkce.

const Todos = () => {

.
.
.

// add getStaticProps() function
export async function getStaticProps(){

    // Get todo list from an API
    // or from anything like a JSON file etc.
    const todos = await fetch('https://.../todos');

    return {
        props: {
            todos
        }
    }
}

• Údaje ze seznamu úkolů můžeme získat z koncového bodu API nebo čehokoli, jako je soubor JSON atd.
• Měli bychom vrátit todos pole v rámci props objekt jako tento

return {
  props: {
    todos,
  },
};

Nyní dokončíme naše Todos render kód.

const Todos = ({ todos }) => {
  // render code
  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.length > 0 ? todos.map((todo) => <li>{todo}</li>) : "No todos"}
      </ul>
    </div>
  );
};

export default Todos;

// add getStaticProps() function
export async function getStaticProps() {
  // Get todo list from an API
  const todos = await fetch("https://.../todos");

  return {
    props: {
      todos,
    },
  };
}

Pojďme rozebrat naši renderovací logiku.

// render code
return (
  <div>
    <h1>Todos</h1>
    <ul>
      {todos.length > 0 ? todos.map((todo) => <li>{todo}</li>) : "No todos"}
    </ul>
  </div>
);

Právě mapujeme naše todos pole jsme obdrželi jako prop a vykreslení každého todo z pole uvnitř neuspořádaného seznamu pomocí map() funkce v JavaScriptu.

todos prop se vrací z getStaticProps() funkce.

Když nyní prozkoumáte prvek své webové stránky, uvidíte toto:

Báječné! Právě jste změnili svou stránku na statickou 🤓.

To pomáhá v SEO.

Neváhejte a sdílejte, pokud vám to přišlo užitečné 😃.