Какво е getStaticProps в Next.js и кога да го използвате

Next.js е много гъвкава библиотека на React, която помага при извличането и изобразяването на данни. Основната цел на Next.js беше да изгради SSR уебсайтове, които генерират HTML динамично през сървъра всеки път, когато получат нова заявка.

Има три различни начина за изобразяване на страницата или уебсайта с Next.js или извличане на данните:

  • Изобразяване от страна на клиента (CSR): Страницата първоначално се изобразява от страна на клиента, което означава, че извличането на данни става след зареждане на първоначалния HTML и JavaScript. Това може да доведе до по-бавно първоначално зареждане и потенциално по-малко удобство за SEO.
  • Изобразяване от страна на сървъра (SSR): Страницата се изобразява изцяло от страната на сървъра, преди да бъде изпратена на клиента. Това гарантира, че първоначалното зареждане съдържа цялото съдържание, включително данни, извлечени от API. Това е страхотно за SEO и производителност при първоначално натоварване, но също така може да натовари повече сървъра.
  • Генериране на статичен сайт (SSG): Страницата се изобразява предварително по време на изграждане и генерираните HTML и JavaScript след това се сервират на клиента. Този подход съчетава предимствата на SSR и изобразяване от страна на клиента чрез създаване на статични файлове, които могат да бъдат кеширани и разпространявани чрез мрежа за доставка на съдържание (CDN).

GetStaticProps() се използва главно в SSG, който разчита повече на JavaScript и се използва най-вече в ситуации, когато съдържанието няма да се променя динамично с течение на времето, като блог или личен уебсайт като портфолио. В проста логика, този метод е най-вече полезен, когато имаме предварително дефинирано съдържание в някои от CMS с отворен код и искаме да генерираме статичните страници с предварително извлечени данни и да имаме по-добро SEO представяне чрез обслужване на предварително изобразено съдържание .

В официалната документация от Next.js можем да видим примерен код с използвания метод:

import type { InferGetStaticPropsType, GetStaticProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getStaticProps: GetStaticProps<{
  repo: Repo
}> = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}
 
export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

Данните, които извлечехме благодарение на метода getStaticProps(), могат да бъдат предадени като проп към компонента. Има конкретни причини, поради които е конструиран такъв, какъвто е.
Първо изолираме компонента. Концепцията за изолация в React е много важна, защото помага при повторната употреба и капсулирането. Извлечените данни като опора са гаранция, че компонентът е независим и очертава ясна линия на това, което се извличат данни и изобразява компонент.

Техниките за подпори са полезни, когато искаме да предскажем потока от данни, което помага при поддръжката и четливостта на кода. Това се използва за повторна употреба на наборите от данни, които трябва да се показват на различни страници. И накрая, извлечената проп е опростяване на тестването, тъй като имитирането на пропс е ​​много по-лесно от извличането на данните всеки път за сценарии за тестване.

Нека си представим сценария, при който пишем блог и аз използвах CMS като инструмент за организиране на данните на нашия уебсайт. След като зададем всички зависимости, искаме да извлечем данните в нашия компонент (за целите на API използвах GraphQL)

export const getPosts= async() =>{
const endpoint = 'https://'

    const graphQLClient = new GraphQLClient(
    endpoint
    )
    const query = gql`
    query Assets {
        //...
      }`

      const result= await graphQLClient.request(query)
      return result.postsConnection.edges
}

Първо създавам служебна папка и в моя файл index.js и вътре в асинхронна функция, която извлича данните от CMS. Най-новите актуализации от graphQL показват да се използва крайна точка (която може да бъде намерена в API достъп в повечето от CMS) в GraphQLClient за достъп до URL крайната точка на която и да е от средите (API за съдържание се кешират). След това създадох променлива за заявка с моите активи за заявка и просто поисках тази заявка да върне връзката.

Следващата стъпка е да импортирам тази функция в моя файл index.js в моята папка pages и да я използвам в моя метод getStaticProps() в края на кода:

export async function getStaticProps(){
  const posts= (await getPosts()) || []

  return {
    props: {posts}
  }
}

Следващата стъпка е да създам променливата posts, за да върна моите извлечени данни за публикация или празен масив, ако извличането не е било успешно.

Последната стъпка, която ми остава, е просто да превъртя публикациите си и да ги върна в моя компонент:

    <div className={styles.postContainer}>
      {posts.map((post)=>(
       <PostCard post={post} key={post.title}></PostCard>
  
      ))}
       </div>

… и това е. Ето как в най-простия случай можем да извлечем данните от външен източник, използвайки метода на getStaticProps() в Next.js