Как работать с функцией getStaticProps?

Question

[semki096]

Насколько я понял, getStaticProps запускается при сборке, внутри получаем нужные данные, кешируем их и возвращаем эти данные. При повторном запуске этой функции - просто отдаем данные из кеша. Правильно ли я понимаю алгоритм?

Если всё так, тогда вопрос.
Есть страница products со всеми товарами:

export default function Products({ products }) {
  const router = useRouter();
  return ( ... выводим список товаров )
}
export async function getStaticProps() {
  const response = await fetch('http://localhost:3000/api/products');
  const products = await response.json();
  return { props: {products} };
}

Есть страница product конкретного товара:

export default function Product({product}){
    return( ... выводим конкретный товар )
}
export async function getStaticPaths() {
  const res = await fetch('http://localhost:3000/api/products')
  const products = await res.json()
  const paths = products.map((product) => `/product/${product.id}`)
  return { paths, fallback: false }
  }
  export async function getStaticProps({ params }) {
    const res = await fetch(`http://localhost:3000/api/products/${params.id}`)
    const product = await res.json()
    return { props: { product } }
  }

Сам вопрос. На странице всех товаров у меня есть модальное окно. При клике на "Подробнее" - открывается модальное окно (в компонент модального окна передаю id товара):

<Modal 
        isOpen={!!router.query.id}
        как сюда передать данные товара на который кликнули?
>
        здесь данные товара на который кликнули

</Modal>

Как в теперь модальном окне получить данные этого товара? Опять вызывать getStaticProps?

Comments

[northernwind]

Вообще не вижу проблемы передачи пропсов в модальное окно.

<Modal isOpen={!!router.query.id} props={props}>
    <MyComponent>{props.product}</MyComponent>
</Modal>

getStaticProps автоматически распространяет возвращаемые `props` на всю страницу. в которой он был вызван.

Answer 1

[AlexlMl]

getStaticProps - нужна для создания статики, а не кеширования. getStaticProps нужна для создания конечного html файла.
В мадальное окно все нужные данные отправляй props`сами.
Вы обернули getStaticProps в getStaticPaths и экспортируете её, может не нужно так :)

Comments

[semki096]

>Вы обернули getStaticProps в getStaticPaths и экспортируете её, может не нужно так :)
>Почему обернул, вроде как две разные функции? В документации то же самое

// pages/posts/[id].js

function Post({ post }) {
  // Render post...
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Post

[AlexlMl]

semki096, в документации экспортируются по очереди, а Вы вложили одну функцию в другую.

[semki096]

AlexlMl, да я немного неудачно скопировал со сдвигом.