fetch-data-ssg-nextjs13

//fetch is your typical fetch function but it's extended by Next.js
async function fetchData(params) {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon')
  return res.json();
}

async function Page() {
  const data = await fetchData();
  return <div>{data.results.map(result =>
    <p key={result.name}>data.name</p>;
  )}</div>
}

This is a Server component by default

We can now do Static site Generation with fetch

How to fetch static data in Next.js 13 vs 12

To create a new page, we need to create a special file name called 'Page'

//allows you to fetch 'pokemons' in the cache
async function getStaticProps(params) {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon')
  const data = await res.json();
  return {
    props: { data }
  }
}

async function Pokemon({ data }) {
  return <div>{data.results.map(result =>
    <p key={result.name}>result.name</p>;
  )}</div>
}

Next.js 13

Next.js 12

By default, it adds a param to fetch { cache: 'no store'} which means it's going to fetched and cached

We are fetching Pokemons using Static Site Generation (SSG)

bulbasaur

pikachu